WordPress theme tweaking for non-WP Devs

WORDPRESS THEME TWEAKING

Within this post I would like to show non-WordPress developers some quick tips on how to tweak, extend and optimize an existing WordPress theme.

WordPress is used by 58.7% of all websites ( w3techs.com) and therefore chances are that you might be blogging on a platform whitch technology isn’t matching with you background. Don’t worry, it’s not required reading endless pages of docs because I will cover some common cases within this post.

WordPress theme tweaking introduction

Now before we continue, I will briefly summarize what will be covered within the sections below.

In case you are blogging in WordPress for a while, then you most likely felt the need to; make some simple markup changes, include a JavaScript library, adding custom styles, minify resources or include a static page. Just simple web development tasks.

Because we are all lazy by design, you have most likely installed a dozen of WordPress plugins to accomplish this (like I did) and now wondering why the total page size, page load time and total requests have increased significantly…

One other thing, Plugins are bad

Now always true however, when it comes to simple plugins you will have to keep mind that they have been designed to work easily work with every template and don’t have any knowledge of you content. For example; Adding a code snippets snapping will add include the JavaScript and styling to all of your pages. They also need to be updated often and can conflict with other plugins as well.

NOTE: I won’t cover best practices, because I assume you’re not planning to become a WordPress development hero. You just want to get things done and learn something on the way.

Let’s get started!

At this point it’s required to know which theme you are using and retrieve the folder for this theme from your WordPress environment. Root » wp-content » themes » your-theme. Don’t forget to create a backup copy just in case.

1 – Minify your resources.

Really simple, just minify the JavaScript files and style sheets found within all nested folders and save yourself the work of maintaining another plugin. This will also eliminate the need for WordPress to execute something at runtime.

2 – Adding customs styles / overriding styles.

There are a lot of custom CSS plugins available allowing you to add styles or override existing styles. This is completely unnecessary. You can simply include the changes within the themes .css file. This will save another resource for download and you won’t end up with uncacheable URL’s. Just make sure you can reapply the changes in case you update the template.

3 – Including resources only within certain page types.

Some pages might depend on additional JavaScript files and therefore would like to include the resources for some page template types. For example, only the homepage includes a dynamic banner section etc.

To accomplish this just;

  • Create a copy of the footer.php and rename the file footer-[yourname].php.

NOTE: Sticking to the naming standards is important given that this is a core part the WordPress template selection hierarchy.

  • Open the footer-[yourname].php and hardcode the script reference within the template. Yes, this is not a WordPress developer’s guide.

NOTE: At this point it’s required to change the template page which included the current footer. For my example, this would be the homepage (index.php) however, for your scenario this might differ.

  • Open index.php and search for get_footer() ; and alter the calls so it includes the suffix as a parameter like this get_footer(‘yourname’);

After saving the template, WordPress should include your version of the footer instead. There is also a function called get-header which works identical.

More information about the get_footer function can be found here

4 – Creating a new page template.

Within WordPress, page templates are a specific type of template file that can be applied to a specific page. For example, every theme contains a page.php file which is used by default for most non-blog related pages. You might not be happy with the layout, because it may include the widgets section which isn’t really appropriate on the contact or about page. Luckily it’s very easy to create new template by following the steps below:

  • Create a folder within the root of your theme called page-templates
  • Copy the page.php file within the page-templates folder
  • Adjust the context and rename the file as desired.
  • Inlcude <?php /* Template Name: mytemplate */ ?> at the start of the file and replace mytemplate with something descriptive.

When creating a new page within the Admin website, you should be able to see the added template within a section called Page Attributes.

WordPress template tweaking

More details regarding page templates can be found within the documentation.

5 – Including hardcoded content within a page template

Sometimes you just want to include some static “complex” content within a page. Maybe it’s an application or something different with complex content. You could use just a standalone .html page for this, but then you would lose many of the page properties like; SEO settings, the theme, title etc. To avoid this, just follow the steps as within option 4, Creating a new page template. And include your content within the template as well.

Conclusion

As explained before, I’m not a WP developer and don’t have the intention to be one. I just want to customize my blog (just a simple site) and already know what the output should be. The steps as covered above helped me with this process but I do know they aren’t all that pretty.

If this scenario applies to you as well, then this might be helpful. Just make sure to keep track of your changes and don’t get carried away into WordPress theme tweaking.

Post Navigation