Code Snippets

Convert A WordPress Menu To A Bootstrap 4 Menu

by Leave a Comment

Why convert a WordPress Menu to a Bootstrap 4 Menu? Maybe because you are designing your own theme and want a mobile responsive menu without building one from scratch. Also, because Bootstrap is a widely accepted solution and is used on countless websites as a valuable and useful front-end toolkit.

There are other front-end toolkits out there but Bootstrap is one of the most popular. If you don’t know what Bootstrap is it may be worth your time to go and check it out.

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

https://getbootstrap.com/

“Bootstrap is is the most popular CSS Framework for developing responsive and mobile-first websites.”

https://www.w3schools.com/whatis/whatis_bootstrap.asp

Adding This Code To An Existing Theme

Before moving ahead, make sure you understand what is a parent theme and a what is a child theme. If you are not careful, when the parent theme is updated you may lose all of your theme changes. By default, this source code points to the Twenty Nineteen theme as its parent theme.

The source code can be downloaded from my GitHub account. In order to use this code you will need to know the named location of the menu you would like to convert to a Bootstrap 4 menu. Once you know the named location, update the variable $name_of_menu_to_replace to its value.

Things To Know

By default Bootstrap 4 does not support multi-level menus. This means having submenus is not supported. There was a time Bootstrap supported submenus but ever since v3.0 the feature has been removed. According to one of its authors, “Submenus just don’t have much of a place on the web right now.” It’s a shame the authors feel this way. But for now that is just the way it is.

Another thing to know is that a quick Google search will reveal several possible solutions from many great people. Each solution is valuable in its own merit. One goal I had was to find a solution that was simple and did not use JavaScript. For that reason I chose a solution which can be found on Codeply to model after. It was simple and it it just worked.

Programmatically Set Reading Settings in WP Admin

by Leave a Comment

To set a Home Page and Post Page, changes are normally submitted manually in the Reading Settings page of the WP Admin Dashboard. With the code snippet below, these changes can be made programmatically.

The two variables, $home_page and $blog_page, should match the title of a Page you create in the WP Dashboard.

<?php
/**
* Update WordPress Reading Settings Programmatically.
*
* @author Edwin Velez
* @see https://edwinvelez.net/programmatically-set-reading-settings-in-wp-admin/
*/
// Set static front page.
$home_page = get_page_by_title('Home');
update_option('page_on_front', $home_page->ID);
update_option('show_on_front', 'page');
// Set blog page.
$blog_page = get_page_by_title('Blog');
update_option('page_for_posts', $blog_page->ID);
view raw functions.php hosted with ❤ by GitHub

Compare A Domain Name Or Hostname with A WordPress Site

by Leave a Comment

The code below is able to compare a domain name or hostname with a WordPress site. What exactly does this mean?

WordPress has the built-in function get_site_url() which returns the URL for a given WordPress site. Imagine you have two sites. One site is for development work or staging design. The other is publicly available on the Internet and is the gold standard for all your hard work. What if certain lines of code should only run if in one environment but not the other? This is where comparing a domain name or hostname with a WordPress site can be useful.

In the code below, the variable $live_site_url should point to your live site. Again, your live site is the domain name, i.e. example.com, where your WordPress instance can be found on the Internet. Finally, add your lines of code within the if block.

<?php
/**
* Compare A Domain Name Or Hostname with A WordPress Site
*
* @author Edwin Velez
* @see https://edwinvelez.net/compare-a-domain-name-or-hostname-with-a-wordpress-site/
*/
// The domain name or host you want to compare. Can also be a host i.e. http://localhost
$live_site_url = 'https://edwinvelez.net';
$head_pattern = '/(https?:\/\/(w{3}\.)?)?(^w{3}\.)?';
$tail_pattern = '(\:[0-9]+).*|\b\/.*|\b\?.*';
$head_vs_tail_boolean = '|';
$regex_flags = '/m';
$regex_pattern = $head_pattern . $head_vs_tail_boolean . $tail_pattern . $regex_flags;
// Strip everything before and after actual domain name and hostname.
$live_site_url = preg_replace( $regex_pattern, '', strtolower( $live_site_url ) );
$site_url = preg_replace( $regex_pattern, '', strtolower( get_site_url() ) );
$is_live_site = strcmp( $site_url, $live_site_url ) === 0;
// Is the web browser pointing to the live site?
if ( $is_live_site ) {
// Insert code here to run if this is your live site.
} else {
// Insert code here to run if this is not your live site.
}
view raw functions.php hosted with ❤ by GitHub