WordPress Theme Tips and Tricks

A short list of WordPress theme tips and tricks to get you started

This is not intended to be a concise and perfect tutorial for beginners to start their very own theme from scratch. There’s already a multitude of tutorials on the web available for this. For example, Line25 provides a list of the best 15 tutorials for starting out.

This is meant to be more of a standards and best practices worksheet. This is meant to be amended and revised as new techniques are learned and discovered. WordPress is constantly updating, so so should our knowledge of best practices. The following WordPress theme Tips and Tricks are meant for beginners to get started creating a theme correctly.

Starting Out: Okay, WordPress is installed. Now what?

You’ve installed WordPress correctly and tested the database. You’ve played around with some of the features, looked at plugins, and even posted a page to start playing in your sandbox. Now you want to start creating your theme.

Start by creating a folder in the wp-content/themes/ directory with an obvious and appropriate title. All of the theme’s work will go into this folder. If you’re starting from a carve, it’s a good idea to copy all of the assets (i.e. – images, JS, etc.) into this directory. If you’re carving from scratch, you should place all of your created assets in this directory.

The Stylesheet

A theme’s default stylesheet is its identifier and the main styling tool for its content. In my opinion, the stylesheet is the best place to start because it is the initial definition of your theme.
You identify your theme in the section of your stylesheet at the very top that’s been commented out. Below is an example of this:

1
2
3
4
5
6
7
8
9
/*
Theme Name:     ThemeScheme
Description:    A search engine optimized website framework for WordPress.
Template:       twentyfourteen
Author:         You
Author URI:     http://yoururl.com/
Version:        1.0.0
Tags:           SEO, ThemeScheme, Awesome Possum, etc.
*/

The ‘Theme Name’ portion of this comment is where you name your entire theme.
The ‘Template’ portion of this comment is where you will assign a parent theme.

For more information, view the WordPress Codex entry for Theme Stylesheets

Child themes and why

It is important for us to always assign parent themes for the custom themes that we create. There are a multitude of reasons why, but the most important for us would be that it provides security. If there is ever a vulnerability that is assessed and patched for a theme, it will come through as a push-button update available to the WordPress backend user.

In addition, when using child themes, it ensures that the website owner will not override our work when they update WordPress. Updating WordPress is extremely important and a seamless integration of style and security make for a great website.

Another fairly important reason to child theme is to make use of the set of templates and code snippets already available with the parent themes.

Setting up Your Theme’s Structure

The best place to start in a child theme is your header and footer files. When using a child theme, WordPress will pull in any files that are needed from its parent theme. The header.php and footer.php files are the most important to get right because they start and close the wrappers for the content of the site.

Architecture of Your Design

When looking at your carve, or the image that you need to carve, where does the header stop and the content begin? Where does the content end and the footer begin? These are the landmarks of where you want your header, footer, and content sections.

If there is an obvious container for your content and your sidebar(s), you may want to include the beginning in your header and the end of that container in your footer. This will make your templates and any templates provided by WordPress plugins easier to manage.

Header File

Your header.php file will include everything you need for the top portion of your website. This includes everything within your <head> tag and the declaration of HTML type as well as your opening body tag.

Always make sure that important and useful functions are being included in the appropriate places. For instance, the wp_head(); function in the <head> tag, just before you close it.

The wp_head(); function spits out the enqueued scripts and CSS files for your plugins and themes, where they need to go. It is important to always enqueue these, as it prevents duplicate files from being loaded and ensures that the scripts are only needed on the pages that you want them included.

Remember: A site running just one version of jQuery is much more effective and responsive than a site that has several versions bogging down browsers.

For more information on wp_head(), visit the WordPress codex entry.

Enqueueing Styles

The following is a function that can simply be added to your functions.php file and modified as needed in order to enqueue JavaScript and CSS files.

1
2
3
4
5
6
7
8
function buckMild_load_scripts() {
        wp_enqueue_script('buckMild_index', get_stylesheet_directory_uri().'/js/index.js', array('jquery'));
       
        wp_register_style( 'buckMild_custom_style',
            get_template_directory_uri() . '/css/custom-style.css');
        wp_enqueue_style( 'buckMild_custom_style' );
}
add_action('wp_enqueue_scripts', 'buckMild_load_scripts');

The first function used within buckMild_load_scripts() is wp_enqueue_script(). This function will enqueue a JavaScript file and put it in its proper container the <head> of your theme.

The first command wp_enqueue_script() accepts is a unique title for the file being provided. Be sure to remember to change this name and keep it unique. The next argument is the path to the JavaScript file. The final argument is an array of different types of JavaScripts that need to be called in order to make this one work. This script requires jQuery, and is the only entry in that array.

The next function used is wp_register_style(). This function works with the last function being used, wp_enqueue_style(), to place an extra stylesheet in the <head> of your theme.

Just like wp_enqueue_script(), the first argument passed to wp_register_style() is the unique name given to this style. The second, again like the former function, is the location of the file.

To make sure that all of the information in wp_register_style() is placed correctly in the of your theme, call it by its handle with wp_enqueue_style().

To make sure that this entire function is called, we add an action for when enqueueing scripts happens in the WordPress markup, and we let WordPress know that this function must be called at that time.

For more information on these functions, check out their entries in the WordPress Codex:
WordPress Codex entry for wp_enqueue_script()
WordPress Codex entry for wp_register_style()
WordPress Codex entry for wp_enqueue_style()
WordPress Codex entry for add_action()

More helpful header functions

WordPress has many more extra functions and helpers to make theming easier.

WordPress Codex entry for body_class()

This function is to be placed within your opening body tag, like so:
<body <?php body_class(); ?>>
This simple addition can make your life a lot easier. This will add classes to the body tag pertaining to the type of page that’s being viewed. For instance, on the page designated as your blogroll, it will add the class ‘blog’. On your front page, it will add the class ‘home’.
It also makes sure to identify each page that it is on with its unique post ID number. This is extremely helpful for doing something like hiding a contact form in the sidebar of certain pages.

WordPress Codex entry for get_stylesheet_directory_uri()

This is a function that returns the path of the current theme. It defaults to the child theme being used (where applicable) and returns a string that can be worked with. In order to save just a bit of memory, it may be a good idea to store the result in a variable and print that out as needed within the theme.
i.e. – <img src="<?php echo get_stylesheet_directory_uri(); ?> /images/logo.png" alt="<?php bloginfo('name'); ?>" />

Notice that the alt text is pulling your site’s name dynamically.

WordPress Codex entry for get_template_directory_uri()

This function works exactly the same as get_stylsheet_directory_uri(), however this one returns the parent theme’s directory when a child theme is being used.

WordPress Codex entry for site_url()

This function returns the site’s URL as defined in the WordPress settings. Because our sites’ URLs change from testing to live, it is important to use functions that can handle this sort of change.
i.e. – <a href=”<?php echo site_url(); ?>”>Home</a>

WordPress Codex entry for home_url()

This function works exactly as site_url() above, but returns a different parameter based on your settings. The Site’s URL and the Blog’s URL pertain in the settings correlate to each of these functions.

Footer File

Your footer.php file closes off all of the HTML and presents the bottom of your theme. It is important to remember to add the wp_footer(); function just before the closing <body> tag in this file. This function prints important hooks and references for JavaScript files used by your plugins and may even be used by you.

For more information on the wp_footer() function, visit the WordPress codex:
wp_footer In the WordPress Codex

The Importance of Those Extra Steps

Always make sure to include the wp_head(); and wp_footer(); in your header.php and footer.php files, respectively. These functions make sure that hooks are available for the JavaScript used by plugins you will need and by your own theme.

You may have noticed sites that don’t show the WP Admin bar on the front end when you’re logged in. The most common cause for this is neglecting the wp_footer(); function before the closing <body> tag.

What if the site’s URL changes? What happens when you transfer hard-coded URLs in theme files from a development site to a live site? Going through each file, or even performing a find-and-replace on an entire directory can cause much more frustration and provide a lot more hassle than simply remembering to use the proper functions.

Your Content Areas

The different portions of the already existing parent theme will be repurposed for your new theme.
Some examples of these pages include page.php, single.php, content.php, and so on. You can simply copy these files from your parent theme directory and place them directly into the child theme’s folder and edit them there.

Keep in mind that if a file does not exist in your child theme’s directory, it will be pulled from the parent theme. What this means is that certain content areas may not show up correctly if you too much adjustment is needed for the display pages. If the theme requires you to make large changes like that, just be certain that every accessible page is moved over to your child theme’s directory and that you’re setting up the HTML correctly.

Helpful Functions and Tips

add_filter('widget_text', 'do_shortcode');

Drop this filter in your Functions file, and it will add shortcode functionality to your widgets. It is generally frowned upon in our line of work to use plain text widgets because they don’t transfer over with the database. When it must be done, though, you may want the option to add shortcodes to them. This function will allow that.