WordPress Theme Customization Essentials
With over 10,000 themes, WordPress theme marketplaces provide a range of options for sprucing up virtually any kind of website. However, most website owners will find that each of these needs a little tweaking in order to be just perfect for their own website.
This is why 85% of website owners customize their themes despite the great variety of choice offered on ThemeForest, TemplateMonster, and other popular marketplaces. Given that a unique design is still a precondition for excellent user experience, this figure is not at all surprising.
Of course, tweaking a WordPress theme is not something you’d want to mess around with if you’re not completely sure what you’re doing. At the same time, however, it’s neither a developer thing only. The truth is that you don’t have to be a CSS master to customize your WordPress theme, but you do need to be familiar with the way CSS, HTML, and WordPress themes work.
WordPress theme customization options
For some basic tweaks, your theme will probably offer different predefined customization options. These can be found under the Appearance -> Theme Options menu, or in a separate dashboard item that carries the name of your theme. Some themes allow you to change the color scheme to another pre-defined color set, add or remove an automatic slider, or adjust styling or navigation settings.
For all the other modifications, you’ll need to edit your theme’s CSS files. WordPress provides you with two relatively simple ways to do this: through its built-in theme editor that can be accessed from the admin panel under the Appearance -> Editor menu, or by editing files on your computer and uploading them via a FTP client. However, before you start changing anything, there are two critical steps you need to take:
1. Back up your website (using the Tools -> Export option) because you’ll want to have a recent copy of your website in case something goes wrong.
2. Create a child theme to ensure none of your modifications would be lost next time you update the theme. We discussed child themes in one of our earlier posts and we encourage you to read it through if you’re not sure why or how to create one.
The anatomy of a WordPress theme
Like anything else in WordPress, the structure of the themes designed for this CMS is quite straightforward. Although the very code can be lengthy and seemingly complex, the most important elements of the theme are easy to recognize and modify. Without going into too much detail, we’ll mention that there are only two files that are necessary for a WordPress theme to work: style.css and index.php.
However, most WordPress themes will also include template and localization files, as well as some graphics and text files such as readme.txt. Among the most important ones here, Template partials are typically the files where most edits are made since they contain the following:
– Header. Located within the header.php file, header represents the uppermost area of your page. Typically, this is the area for the elements such as a logo, website title, and tagline.
– Sidebar. This is a sidebar navigation that could be located either left or right of the main contents on your page and is defined in a sidebar.php file.
– Footer. Coming in the form of footer.php, this file enables you to generate and customize footer for all your pages. Although many themes come with a footer widget enabled, this is the file you would need to edit in case you want to have multiple or custom footer sections.
These three template partials represent only the basic elements of your theme. Of course, the full structure of a WordPress theme extends beyond these, as shown in this visual guide to the hierarchy of WordPress templates.
Of course, you don’t really need to understand this whole hierarchy to be able to modify your theme. This should rather serve as a general guide to help you identify the elements you need.
Understanding templates
As you can see in the illustration above, everything about your theme has its special place in the WordPress theme code hierarchy. Depending on the part you want to edit, you need to find the associated template. Some of the basic WordPress templates include: category.php, comments.php, single.php, archive-{post-type}.php, and others. Each of these files contains pieces of code that make your website look the way it does.
So, if you want to customize the comment form, you need to find the comments.php file. Customizing the comment form is usually a better idea than installing a new comments plugin that can slow down your website. A detailed guide on handling comment forms is available here.
Creating a custom page template
If you want to create a page with a unique layout without affecting all the other pages, WordPress allows you to create custom templates and assign them to some specific pages. For example, you may want to create a special landing page for your ebook or free trial offer and you want this page to be completely different from the other pages on your website.
To do this, you need to duplicate your theme’s page.php file that displays the theme’s generic page, rename it and then modify CSS any way you like. At the top of the page, you should add the following lines:
/*
Template Name: Landing
*/
?>
This will allow you to choose this template from the default Template drop-down menu in your posting dashboard and even use it for all similar pages in future.
Of course, creating a custom page template is only one of the things that can help you improve your website’s performance and is intended to give you a general idea on how theme customization works. The actual process will largely depend on the theme you use, as well as the level of your familiarity with CSS and HTML. An important thing to note here is that even if you’re not a pro, this doesn’t mean you should restrain from theme customization altogether. Instead, you can find detailed guides for specific elements on WordPress developer pages, which provide you with enough information to help you do some awesome things.
