We are going to take a look at how you can use browser developer tools to edit your WordPress theme.
Template Express already looks out for the less technical theme users out there (we know you have more important things to worry about!) by making our theme customizer options as intuitive as possible in all of our themes.
But we also add a custom css option and child theme compatibility for a reason: because a lot of users want to make further changes to their design.
Custom css editor’s and child themes only become great tools if you have some css knowledge.
That’s where browser developer tools come in:
Browser developer tools are a massive time saver for any designer or developer. And with WordPress theme styles becoming more complicated by the day these tools are more crucial then ever.
At Template Express our inbox is always full of questions from customers who want to tinker with theme styles. These questions vary from “how do I change this font color?” to “how do I hide this section on the homepage?” Our themes are already built with excellent customizer options to achieve most of these goals but some of you might need to go a step further when trying to find that unique design element.
Obviously we are more than willing to support our excellent customers by providing the answers but what most theme users don’t realise is that they can fix most css issues just as quick themselves by using browser developer tools.
What are browser developer tools?
Latest versions of all of the major browsers (Internet Explorer, Firefox, Chrome, Safari, Opera) have web developer tool capabilities either as built in features or extensions.
Activating developer tools in your favourite browser
For this example we are going to use the Chrome developer tool. To access the Chrome DevTools (that’s what they call theirs!) open a web page in Google Chrome, select the Chrome menu at the top-right of your browser and then select Tools > Developers Tools. Alternatively you can just right-click on any element on your web page and select Inspect Element. Both of these methods will open the Devtools window at the bottom of your browser.
You will see a bar at the top of the dev tools area with various tabs such as Elements, Resources, Networks, Sources, Timeline etc. These all offer very useful information about the website you are using but we are going to concentrate on the Elements tab to help us change some design elements so make sure that “Elements” is selected.
Making these changes live
The developer tool has identified your problem and helped provide you with the solution. But the changes you have made using the tool has no effect on your live site. You will have to copy these changes into your custom css box.
Of course, you don’t actually have to use the custom css editor to make these changes live. You could make the changes directly into your style.css file. However this will cause problems when you update to a new version of the theme. All of your changes will be overwritten. This is where child themes come in.
Child Themes are easy to implement and are commonly used for WordPress theme changes. Similar to the css editor, any styles you write here will overwrite the main theme styles. And because the child theme styles sit seperate from the main theme they cannot be overwritten when a theme is updated.
To create a child theme all you have to do is create a new theme folder (eg. “discovery-child”) under the “wp-content/themes” folder. Then create a new css file in the child theme folder and call it style.css. Add the following code into this style.css file:
Theme Name: Discovery Child Theme
Theme URI: http://www.templateexpress.com/discovery/
Description: Discovery Child Theme
Author: Template Express
Author URI: http://www.templateexpress.com
/* =Theme customization starts here
In your WordPress admin area you will have to activate the child theme in Appearance > Themes.
Now go ahead and add some styles to your child theme style.css file.
Adding finishing touches to your website is easier than ever thanks to the constantly improving browser development tools that are freely available. These tools help us understand how the elements of a web page are put together and how they can be changed to suit your design needs. Now you can use browser developer tools to edit your WordPress theme and make those important changes.