18.11 Modifying Themes
The easiest customization you can make to a WordPress installation is to change the theme through the dashboard, or tweak an existing theme for your own purposes in code. The changes you make to your themes are independent of the WordPress core framework, and therefore can be easily transferred to a new site (or put up for sale).
All the files you need to edit themes are found in the folder /wp-content/themes/ with a subfolder containing every theme you have installed. Each theme contains many files representing the hierarchy in Figure 18.38 as well as others such as style sheets. Inside these files is the code to generate HTML, which is a mix of PHP and HTML.
The dashboard provides an easy interface to preview, change, and search for themes. When you build themes of your own, you should take care to ensure that they work in the dashboard, so that they are as interchangeable as regular ones for all your users (including yourself). Learning how to edit themes is the best place to begin learning about the inner workings of WordPress.
Pro Tip
In addition to the free themes available, there is an active community of theme designers who sell custom themes for WordPress to users that implement functionality or good design. For a few dollars, it may be possible to save dozens or hundreds of hours of work, which is likely a good investment (depending on your circumstances).
Creating a Child Theme (CSS Only)
Every theme in WordPress relies on styles, which are defined in a style sheet, often named style.css. The styles are normally tightly tied to the high-level wireframe design of a page where class names of <div> elements are chosen. A theme can be seen in action by viewing posts on your page and looking at the styles through the browser, exploring the source code directly in your template files, or viewing the code through the dashboard theme editor.
To start a child theme from an existing one where the only difference is a different style.css file, create a new folder on the server in the theme folder. Convention dictates that child themes are in folders with the parent name and a dash appending the child theme name. A child of the Twenty Sixteen theme would therefore reside in /wp-content/themes/twentysixteen-child/. In that folder create a style.css file with the comment from Listing 18.16, which defines the theme name and the template to use with it. The template defines the parent template (if any) by specifying the folder name it resides in. In this case the Twenty Sixteen theme is in the folder named twentysixteen/.
Listing 18.16 Comment to define a child theme and import its style sheet
/*Theme Name: Twenty Sixteen Example ChildTheme URI: http://funwebdev.com/Description: Theme to demonstrate child themesAuthor: Randy Connolly and Ricardo HoarAuthor URI: http://funwebdev.comTemplate: twentysixteenVersion: 1.0.0*/@import url("../twentysixteen/style.css");
Once this child folder and file are saved, go to Administration Panels > Appearance > Themes in the dashboard to see your child theme listed, using the name specified in the comment. Now any changes do not touch the original theme and you can switch themes back and forth through the dashboard. Click Activate to start using the new theme right away. Add styles to style.css that override the existing styles in the template to define a theme truly distinct from its parent.
18.11.1 Changing Theme Files
Although all the styles are accessible to you, you may wonder where the various CSS classes are used in the HTML that is output. The included PHP code is where the CSS classes are referenced. You must first determine which template file you want to change. As the hierarchy from Figure 18.38 illustrates, there are several source files used by default. Best practice is to add the newly defined theme files to a child theme like the one we just started, leaving existing page templates alone. To tinker with the footer, we would make a copy of the existing footer.php in our new theme folder.
Tinkering with a Footer
Many sites want to modify the footer for the site, to modify the default link to WordPress if nothing else, all of which is stored in footer.php. The simple footer in Listing 18.17 is derived from the Twenty Sixteen theme and does just that, changing the footer link.
Listing 18.17 A sample footer.php template file with the change from the original in red
</div><!-- #main .wrapper --><footer id="colophon" role="contentinfo"><div class="site-info"><a href='http://funwebdev.com'>Supported by Fun Web Dev</a></div><!-- .site-info --></footer><!-- #colophon --></div><!-- #page --><?php wp_footer(); ?></body></html>
Changing any of the files in the theme is allowed, which means you can play around with any of the code to get your site to look just as you want it. The more you try and hack around, the sooner you will learn that there are all sorts of functions being called that aren’t in PHP. The wp_footer() function, for example, produces no output, but many plugins rely on it to help load JavaScript, so it should be included. Those functions are WordPress core functions, which you will learn about as we develop custom page and post templates, as well as plugins.
Note
The following section gets into the inner working of WordPress to allow even further customizing and enhancement—well beyond what is required by the typical site user. In contrast, most websites do not need much configuration beyond what can easily be done in WordPress right out of the box. It’s important to point out that before creating your own custom code you should look for existing (well supported and rated) plug-ins, since a solution may already exist.
The ability to create custom posttypes, plug-ins, and other advanced aspects of CMS are important concepts for companies wanting to provide common hosting, functionality, and custom development to a range of clients. Creating reusable themes and plug-ins is also important for the smaller scale developer, who can potentially tap into the economic market of paid plug-ins.