Customizing WordPress

Three Simple WordPress Customizations

Posted in Web Development on March 2016

Used by millions of people, from professionals to amateurs, WordPress is undoubtedly a popular CMS. It can be heavily customized or you can easily find themes others have written to beautify your website. I enjoy creating websites from scratch and, when doing so, you are able to fully dig into WordPress’ inner workings. I’ve learned much from trial and error and from the vast WordPress community. There are all sorts of questions posted to forums and blog posts about customizing every little piece of the CMS. Here are three simple customizations that I found most usefully when creating a custom site.

Adding Dynamic Meta Descriptions

When I first started using WordPress the inability to dynamically add meta descriptions to posts was frustrating. After installation, you have a plethora of options to easily start a new website. However, there are crucial effects, such as dynamic meta descriptions, that aren’t available in the WordPress install. Not having a description for search engines to display is unprofessional, can potentially hurt your SEO, and might lose users. WordPress’ documentation explains that “you have two choices: you can add them as generic references or you can use plugins.” When I first became aware of this issue, I chose the latter to assist my need. After weeding out low star reviews, I eventually found a few potential plugins to use. However, they were bloated with useless code and functions that I didn’t want. Obviously you’re able to manually add a meta description, such as:

<meta name="description" content="Put your description here.">

Adding descriptions dynamically to posts that will have unique content is impossible with the example above. If you’ve never used conditional tags before, this is a great opportunity to learn. The way I created my theme didn’t make use of the excerpt section, so I had the opportunity to use it for my meta description. The way to do this is open your header.php file and add the following:

<meta name="description" content="<?php if ( is_single() OR is_page() ) { 
    echo get_the_excerpt(); } 
else { 
    echo 'Description for your homepage and other pages.'; } ?>">

Once that’s added, open an individual post within WordPress’ admin. Scroll down until you find the excerpt section. If you don’t see it, you may need to add it in Screen Options. Within the excerpt input box, you will add your meta description text.

Note that search engine crawls vary, so you probably won’t see your changes right away. The best way to prove that it works is open your post in a browser, right click, and click “View Page Source.” You will see your meta description at the top.

View page source

Customizing WordPress’ WYSIWYG Text Tab

WordPress’ WYSIWYG is a great tool for people to quickly and easily write posts. If you’re like me, you tend to rarely stray to the Visual tab. As a developer, I like to make sure tags are appropriately used and structures are consistent. Not to mention, the use of paragraph and break tags can become a nuisance. Gravitating to the Text tab has a few disadvantages, though. One issue, albeit small, is the ability to quickly use h2 and h3 tags. There is a remedy for this, though. Within the functions.php file, use the following:

if( !function_exists('_add_my_quicktags') ) {
    function _add_my_quicktags() { 
?>
<script type="text/javascript">
    /* 'h2' = button ID          *
     * 'h2' = button value       *
     * '<h2>' = button Tag Start *
     * '</h2>' = button Tag End  */
    QTags.addButton( 'h2', 'h2', '<h2>', '</h2>' );
    QTags.addButton( 'h3', 'h3', '<h3>', '</h3>' );
</script>
<?php 
}
// 'admin_print_footer_scripts' (for admin-only)
// or 'wp_footer' (for front-end only)
add_action('admin_print_footer_scripts', '_add_my_quicktags');
}

Adding heading tags are only a small example of what can be done. Paragraph to block quote tags can be customized to fit your needs. I also use this function to give me the ability to quickly add syntax highlighter tags for displaying code. As a side note, switching back and forth from Text to Visual can erase and reformat your content. When you change tabs and there’s invalid HTML, WordPress tries to automatically fix it. This might result in missing content. It’s best to stay in one tab at a time.

I’ve also found some of the standard buttons are not useful for me. These can be removed within functions.php as well. For example, I want to remove the ol and close buttons:

function appthemes_editor_buttons( $qtInit ) {

  // available buttons
  // strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,dfw

  $remove = array( 'ol', 'close' );

  // put comma separated buttons into array
  $buttons = explode( ',', $qtInit['buttons'] );

  // spit out the buttons to keep
  $buttons = array_diff( $buttons, $remove );

  // put back into comma separated list
  $qtInit['buttons'] = implode( ',', $buttons );

  return $qtInit;
}
add_filter( 'quicktags_settings', 'appthemes_editor_buttons' );

Using Two Different Header Files

This might not apply to many people, since most will reuse the same header across their site, but I found having a separate header a necessity for my own purpose. Maybe you want to display a different navigation when someone visits a category page. Whatever the case might be, it’s still useful to know the option is available. In order to do this, you will need to name your second header.php file appropriately. For this example, I will use header-2.php. Once you have the relevant code within your new header file, you will need to call it. Whether that new header will be included in a single.php, category.php, etc., you will simply call the file in your get_header:

<?php get_header('2'); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

	    <?php if ( have_posts() ) : ?>

	        <?php if ( is_home() && ! is_front_page() ) : ?>
Back To Top