post

We are going to take a look at browser developer tools and how they can make your WordPress theme ever better. 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. 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

Custom CSS Editor

The custom css editor and child themes only become great tools if you have some css knowledge and 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.

These tools allow the developer to work on various web technologies including CSS, HTML and JavaScript. Although you can’t make direct changes to your code, the developer tool allows you to test any web element by editing it and viewing the changes instantly in the browser. Once you are happy with the changes you can move this code over to your live website (more on that later).

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.

Chrome Developer Tool

Chrome Developer Tool

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
Template: Discovery
Version: 1.0
*/

@import url(“../Discovery/style.css”);

/* =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.

Conclusion

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.

Leave a Reply

Your email address will not be published. Required fields are marked *