Some Useful Things About WordPress Which You Should Know

Straight out of the box, WordPress is an amazingly effective content management system and blogging platform.

Within its core PHP interior resides functionality which makes it the most flexible and easy to use platform for creating websites ranging from the simplest blog to a full blown business eCommerce site.

The majority of the WordPress functionality is clearly visible and accessible from the user interface in the administration panel.

However there are also some other less obvious but powerful functional features which are available when you delve a little deeper into the WordPress internals.

This article will introduce you to two common and useful functional features of WordPress which you should be aware of.

WordPress Template Hierarchy

WordPress uses a hierarchical template structure which determines how it renders any particular page or view for your currently active theme.

The mechanics of this hierarchy are quite simple. WordPress will automatically check for the existence of certain template files in your theme folder in a pre-determined order whenever it is trying to render a particular page or view.

For instance let’s take the example of a WordPress page.
Before rendering any “page”, WordPress will check for the following templates in the order shown until it finds one and it will then display the page according to the code in that template file.

If all checks fail it will simply display the page according to the index.php which is the last check in the hierarchy.

The hierarchy of template files for a page is as follows:

{custom-template}.php → page-{slug}.php → page-{id}.php → page.php → index.php

As you can see from the above, the default “page.php” is well down the list in terms of page template hierarchy and therefore there is plenty of scope for you to customize your theme’s pages by creating your own templates.

For example let’s say we had a page called “Products” with a slug by the same name.
If we wanted to automatically display such a page in a customized manner, then we can create a template file called “page-products.php” and place it in our theme directory.

In this file we would write our code specifying how we want this page rendered. For instance we might want to remove any footers or sidebars or display a list of post excerpts which are in a particular category.

WordPress will then automatically render the “Products” page according to the code in the page-products.php template file without any other configuration on our part.

A similar mechanism is also available for other view types such as categories, posts, tags etc

For the category group, the template hierarchy is as follows:

category-{slug}.php → category-{id}.php → category.php → archive.php → index.php

Some other template hierarchies are shown below:

Single:
single-{post-type}.php → single.php → index.php

Author:
author-{author-nicename}.php → author-{author-id}.php → author.php → archive.php → index.php

Tag:
tag-{slug}.php → tag-{id}.php → tag.php → archive.php → index.php

Exploiting the template hierarchy characteristic can be a useful and powerful way to extend the functionality of your theme and how it displays particular pages.

For more about creating your own page template see our post “How to Create a Custom WordPress Page Template”.

For an in-depth technical overview of templates please see the WordPress codex documentation.

WordPress Child Themes

Another powerful and useful feature of WordPress is the Child Theme functionality.

As defined in WordPress.org, a child theme is:

“a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme”

For example let’s say you recently found what you thought was the theme of your dreams and you installed this new theme on your site only to find that you wanted to change some of its appearance or functionality.

Instead of hacking the theme’s code and then having to worry about remembering to put the changes back every time you update the version, creating a child theme is often the cleanest and easiest option.

To make your own child theme you simply create a new folder in the /wp-content/themes/ directory with your child theme’s name.

For example if you wished to modify the twentyeleven theme and wanted to create a child theme called twentyeleven-plus then you would create the following directory:

/wp-content/themes/twentyeleven-plus

The only mandatory file needed for a child theme to work is the style.css file which you would create in your child directory.

You must use a convention when creating your style.css file whereby the comment at the top of the file must be in a certain format (see example below).

The following is an example of a typical style.css file for a child theme:

/*
Theme Name:     TwentyEleven-Plus
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Eleven theme
Author:         Your Name Goes Here
Author URI:     http: //example.com/about/
Template:       twentyeleven
Version:        1.0
*/

@import url(“../twentyeleven/style.css”);

The comment section shown above contains two important mandatory fields:

Theme Name – this is the name of your theme which will appear in the Appearance → Themes page in the WordPress administration panel. This must match the name of your child theme’s directory (case insensitive).

Template – this is the name of the folder of the parent theme from which your child theme will inherit its qualities.

The other fields are optional but it is still a good idea to put some useful information here because these are also displayed in the administration panel of WordPress.

The last line shown above which is not part of the comments is the “@import url(“../twentyeleven/style.css”);” statement. This is also optional and is usually a good idea to include, especially if you wanted to implement some tweaks to the parent theme’s original style.css file.

This line tells WordPress to import the parent theme’s style.css file which means that if left unchanged, your child theme would render the CSS according to the code in the parent’s style.css.

However if you added some CSS code after this line, then the code for the particular CSS element will override the code for that same element in the parent’s style.css file.

Let’s take an example where we wanted to change the background color of our child theme to a light blue represented by the hex code #cee9f5.

The original code in the parent style.css displays the body’s backgound color as grey as shown below:

body {
background: #e2e2e2;
}

Therefore to modify this element we would simply add the following code at the end of our child theme’s /wp-content/themes/twentyeleven-plus/stye.css file.

Thus the contents of the new style.css will look as follows:

/*
Theme Name:     TwentyEleven-Plus
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Eleven theme
Author:         Your Name Goes Here
Author URI:     http: //example.com/about/
Template:       twentyeleven
Version:        1.0
*/

@import url(“../twentyeleven/style.css”);

body {
background: #cee9f5;
}

The above code effectively means that WordPress will load the parent’s style.css file but it will override the code pertaining to the “body” element with the new code for the body element shown above.

The cool thing about this is that all of the other existing CSS properties are automatically used from the parent’s style.css except for the body element which will use your new code.

We mentioned earlier that the only mandatory file in a child theme’s folder is the style.css file. This file will allow you to manipulate any CSS element pertaining to your theme.

You can also do something similar with template files. That is, by creating new template files (such as page.php) with the exact file name in your child theme directory, you can override the functionality of your parent theme with your customised code.

What if you wanted to further extend the functionality of your child theme, by adding your own functions to the functions.php?

In contrast to the child style.css and template files, the functions.php works a little differently, in that it does not automatically override the parent functions.php but is loaded in addition to the parent file.

That is, the child functions.php file is loaded first followed by the parent functions.php file.

As for the previous examples you would simply create a new file in your child theme directory with an identical name to the original file, ie, functions.php.

The child functions.php file doesn’t require any special comments at the beginning such as for style.css but you still need to honor the correct PHP syntax by placing your code between the PHP tags when necessary:
<?php  ?>

In this file you can add the code of any new functions which are not already contained in the parent functions.php file.

What if you wanted to modify an existing function contained in functions.php in the parent theme?

For existing functions contained in the parent theme, the general rule is that you are not allowed to re-declare the same function name in your child theme’s functions.php file unless it is a “pluggable” function in the parent file.

A pluggable function is simply one which is wrapped in a conditional statement during declaration in the parent functions.php file.
Eg:

if (!function_exists('theme_special_nav')) {
function theme_special_nav() {
//  Do something.
}
}

The if statement above containing the function_exists() check effectively means that the “theme_special_nav()” is pluggable.

So before you re-declare any existing functions, be sure to check the parent functions.php file if a function is pluggable. (see the wordpress codex documentation for more info)

One other useful trick when creating your child theme is to include a file called screenshot.png in your child theme directory.

This file contains the preview image of your child theme and will be displayed in the Appearance → Themes page of your administration panel.

Although this file is completely optional, it is handy to include because it makes your child theme look more professional.

In summary, this brief article has only touched the surface of child themes and templates and there is so much more you can learn.

I strongly recommend that if you want to know more, you should read some of the excellent information available on the web starting with the WordPress codex documentation.