Starting off with a new WordPress site? Or maybe revamping an existing one? Either way, you need to find a new theme, and once you decide on one, you shall be making some customization over it for best fitting your requirements. As for deciding on the perfect theme, you can find some help in this article on choosing a WordPress theme. The one you’re reading right now will help you customize WordPress theme after you have picked one.
Follow these Dos and Don’ts to Customize WordPress Theme
You obviously want your website to be unique and stylish. You may have some great design ideas to make your brand stand out which ought to be reflected on your website. However carefully you choose the WordPress theme, WordPress theme customization may become unavoidable in some cases. Modifying WordPress theme can be an easy task if you are careful to avoid some common naïve mistakes.
Do: Always follow WordPress best practices
Best practices are the ‘best’ for a reason. As you set out to make changes in the theme, its CSS or maybe even its scripts, always follow the standard methods. You can use, for instance, wp_enqueue_script to prevent conflicts between your scripts and plugins added in the future.
Do: Run cross-browser tests
Whatever changes you make in your theme should not make it partially or completely incompatible with some browsers. Always run browser compatibility tests to ensure that the theme works just as great everywhere even after you customize WordPress theme.
Don’t: Jump to complications!
Always try the easy ways first. Instead of picking a theme that matches your colour preferences, pick one that best fits your niche and structural preferences and is easier to customize. Always check for built-in customization and features provided with the theme and use them before resorting to other methods.
Don’t: Run away from functions.php
Changing the functions.php file may seem like a useless idea to frontend developers, but it’s way more robust for the future. Most of your structural changes can be handled from this file. For instance, instead of adding scripts to the head element, you can enqueue them in functions.php.
Do: Use a child theme
The theme developer has created something beautiful; don’t mess with the original thing. Also, if you want your changes to stick around even when the theme is updated, making styling changes in the child theme is the right way to do it. You shall find a brief guide to create a child theme in this article.
Do: Customize in the right order
Instead of jumping to intricate ways as you customize WordPress theme, it’s always better to try out the easier methods first. Try modifications in the following order:
- Editing with built-in theme options from WordPress dashboard
- Adding custom CSS in a child theme
- Modify functions.php
- Add another template in the child theme
- Try out a good WordPress theme customization plugin
4 Ways to Modify Theme in WordPress
Method #1: Editing from WordPress dashboard (using the Customizer)
The built-in WordPress Customizer is incredibly user-friendly. Simply log on to WordPress and click on the Customize button at the top of your homepage. A number of basic modifications can be made from the Customizer, including colours, icons, images, backgrounds, etc.
Note that modification options available on WordPress Customizer may be limited and vary based on what the theme developer has facilitated.
Method #2: Design Manipulation with Custom CSS
Changing custom CSS will not be too difficult if you have some idea of styling beforehand. The most obvious tool is the CSS editor that WordPress Customizer comes equipped with. In some cases, however, you will find yourself fretting that you may mess up. As long as it’s just about CSS styling, you can try out Jetpack. The Edit CSS option is available inside Appearance in Jetpack’s sidebar.
If Jetpack doesn’t feel good enough either, I recommend using a CSS editor plugin to customize the WordPress theme. A couple of these that I find reliable are SiteOrigin CSS and Advanced CSS Editor. Remember, though, that it is best to modify CSS after creating a child theme.
Method #3: Tweaks in functions.php
Thinking about modifying the structure of your WordPress theme? You can do it pretty easily from the theme’s functions.php. ‘Pretty easily’ sounds a bit too confident, you may be thinking. If you have a hand in some basic programming, I think it will not be a challenging task. This amazing guide by Justin Tadlock can take you a long way. If you don’t like to look at any code at all, I agree that you should skip this step and move directly to plugins. If you don’t mind trying, there are some things you should remember while editing functions.php.
- Avoid writing your own function if there is already an existing WordPress function to do the job.
- Add a prefix to all custom functions you define.
- You can check out native hooks in WordPress to help you.
- Always use wp_enqueue_script and wp_enqueue_style for all external scripts and styles you add.
- Use a child theme while editing the style and structure of your theme.
Method #4: Using a child theme to add a new template
Creating a child theme is indispensable when you customize WordPress theme in its style and structure, especially its structure. When your site looks for a file to use, it first looks up the child theme if it is available besides the original parent theme. This means that if you have added a functions.php file in your child theme, the site will use this file instead of the one specified in the parent theme. In this way, your changes to the website will not be overwritten when you update the theme.
Creating a child theme
Don’t worry; it’s not tough. There are two ways to edit the files present in your theme: go to Appearance in your WordPress dashboard and then click on Theme Editor, or use an FTP client to browse through the files. After that follow these super-simple steps!
- Browse to this path: /wp-content/themes/
- Next, create a new folder and name it ‘<name of parent theme>-child’
- For custom styling, create a file called css in this folder and add the following standard header.
Theme Name: <name of child theme> Theme URL: https://yourdomain.com Description: A child theme of <name of parent theme> Author: Your name Author URI: http://www.yourdomain.com Version: 1.0.0 Template: <name of parent theme> */ @import url("../<name of parent theme>/style.css");
All done! Now you can activate your child theme from the Theme Editor.
Overriding template files in the parent theme
Go ahead and copy a file from the parent theme folder to the child theme folder. Now, any tweaks you make in the files present in your child theme will be reflected in your website without tampering with the original theme files! You can modify any templates this way but be careful not to mess with PHP code unless you’re an experienced WordPress theme developer.
Method #5: Try out some plugins
This is the best solution for those who want to customize WordPress theme within clicks of a mouse button. With the right plugins, you can modify the themes without necessarily knowing any CSS at all. Many awesome developers often offer their plugins, or at least the basic features, for free. Here are my favourite two:
SiteOrigin CSS lets you modify some more elements in your theme than you could have from the WordPress Customizer.
This is a popular page builder equipped with impressive drag-and-drop functionality. It is a great go-to especially if you want control over your web pages with a simple and fun user interface.
Happy site building! Hope this article helped. There is very less chance of messing up when you customize WordPress theme if you keep WordPress best practices in mind. More importantly, try to pick a theme in which you would need minimum possible structural changes. Changing colour schemes and backgrounds is much easier than modifying the structure of the theme. Also, if a theme offers you built-in customization for your desired changes, there is no reason why you should look for other means to fit your requirements in.