Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Create a child theme based on an existing parent theme in WordPress and change the functionality, presentation, or styling of your website. In this course, author Morten Rand-Hendriksen shows how to use the default WordPress theme, Twenty Twelve, as a basis for a new child theme and add custom menus; new headers, sidebars, and footers; and index pages with widgets and pagination to your site. The course also demonstrates how to add a responsive welcome message to your front page using PHP and jQuery, and how to edit the many templates found in a WordPress theme. Morten explains how to perform these changes using any code editor, the developer tools in the Chrome browser, and WordPress.
When you look at a website in a browser, what you're actually seeing is that browser's interpretation of the code behind the website. In my browser right now I have my website running the Twenty Twelve theme, but what this actually looks like is this. What you're seeing here is the true content of that website, is lots of code and lots of text. So what happens is, the browser grabs all that content, combines it in cascading style sheet code and makes it look nice for humans. When you work with child themes, or any other theme for that matter, one of the first things people want to do when they install a WordPress site and start working with the theme is make changes to the stylesheet, and this is where an important tool in this browser comes in.
Working with style sheets can be really hard because the style code is not directly associated with the main code of the page. You don't see the styles in the markup. So when you're working with stylesheets, in the past, you had to write the style code, save it upload it to the browser, and then see what happened in the browser. But now that process has become much simpler because most modern browsers have web developer tools built-in to make it easy for you to connect to HTML and the CSS together, and also experiment with it.
In Chrome, the web developer tools can be accessed in several different ways. You can go up to the menu here on the far right corner, and select Tools > Developer tools. You can also just hit Ctrl+Shift+I in your browser, this will also open the web developer tools, or if you want to target a specific element, let's say I want to make changes to this link here, all I have to do is right-click on it, select Inspect element and the web developer tools will open directly to that element. The web developer tools are actually advanced applications that let you interact with the live code on the web and make changes to it and experiment with it to find out how it works.
For example, if we want to make changes to this link that I just highlighted, I can go select it in my code here in the Web Developer tools. On the left side, I have the HTML output. On the right side, I have the corresponding CSS that impacts it. So here I can see that this link is affected by this a:hover state, so if I want to make changes to that a:hover state, so that the link looks different, I can go in and edit it right here. I'll simply double-click on the color code and then I can change to color code to something else, I'll say cb4e18, and now you see it went from blue to red.
If I don't like what I just did, I can simply turn it off, or I can reload the page and it resets back to the way it was. So here you are experimenting with live code instead of actually making a permanent change, which means you can go in and edit code to see what happens and if you don't like it, you just revert back, and if you do like it you save it. You can do the same thing with HTML. If I want to see what this line looks like if it's much longer, I can simply go in here to the HTML double-click on the line and then just keep writing, and you see I'm filling in extra HTML that only lives inside my browser.
I'm not making changes to the website itself. I'm just making changes to the instance of this website that lives on my computer and when I reload the page, that change goes away. So basically the browser and the web developer tools gives me an environment where I can experiment with my code and figure out how things fit together and how they work, and then once I have a code I want and it looks the way I want it to, I can copy it out and save it and make it permanent. Using the built-in tools and browsers like Chrome can help you easily view, dissect and make changes to both the web markup or HTML and the style code or CSS of any website.
This makes a short process of targeting specific elements and changing how they appear.
Find answers to the most frequently asked questions about WordPress 3: Building Child Themes.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.