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.
WordPress has two main types of published content, posts and pages, and though most of the time you want a uniform appearance for each content type, there are times when you want certain pages to look a bit different. In Twenty Twelve you already two custom page templates that change to presentation of the pages they are enabled on. You can see them when you go into a page to edit it. Here on the side under Page Attributes you have a section called Template, and under here you have the Default Template and if you drop it down you'll also have a Front Page Template and a Full-width Page Template with No Sidebar.
If you activate one of these, say the Front Page Template, and updates the page and then view the page, you see that the page template looks quite different. It's Full-width and if we go to Appearance > Widgets, and add widgets to the First Front Page Widget Area, lets add Recent Comments, Recent Posts, and maybe Categories, and reload this page with the Custom Front Page Template activated, you see we now get these widgets here at the bottom.
The Custom Front Page Template is meant to be used on the front page. We can also activate the full-width template. I'll go back and edit the page, change the template to Full-width Page, with No Sidebar and then View Page. And you see we know how full width but we don't have those extra sidebar elements. Instead we have comments at the bottom, or I can switch back to the default and again view page, and now we have the standard look with the content on the left and sidebar on the right.
You can create your own page templates to produce specific results on specific pages. I use this technique quite often, because not all pages should be displayed the same way. Sometimes I want to add extra meta information or some other information, or maybe I want to remove something like removing the page title. The reasons for creating custom page templates are endless, unfortunately they're very easy to make. If we look at the theme folder for Twenty Twelve, you'll notice that there's a folder under the theme folder called page-templates, and it is inside this page-templates folder you find the page templates front page and full width.
You don't have to put your page templates in a sub folder, and if you do, you have to tell your theme that that's what you did. The reason why they did it for Twenty Twelve was to create a more structured and organized theme. If we want to create a custom page template for ourselves, we can do it in a very simple way. I'll open my twentytwelve theme here, on the left, and my child theme here on the right. And then I'll go and find my page template, it's here, and copy it over into my child theme.
And then I am going to change the title of my page template. So I will just give it a different name, I'll say no-title-page. Now I am going to open it in my code editor. Now I have to tell WordPress that this is a custom page template. The way I do that is I add a comment at the top. So I am going to remove the comment that's already here, and I am going to add a comment, and in here I am simply going to type Template Name and then give it a new name, and the name should be very descriptive so it'll be No title page template.
All I now have to do is save this new page template with this comment at the top, and I can go back to WordPress, edit the page, go to Template and you see we now have No title page template as an option. I'll update my page, view the page, and you see nothing changed. That's because I haven't actually changed my page template yet. Now I want to make changes to content in my page template, but when I go back to my code editor and I look at the page template, I notice that the contents of the page isn't actually in the page template. You see instead, we have this function called get_template_part, that calls a file called content-page.
So what I need to do is get the content from content-page and put it in first. I'll go back to my parent theme and this time I am simply going to find that content-page-template open it, copy out all the content, and then replace the call here, get_template_part with that content I copied out. Now all I have to do is find where the title is, it's right here, and then entry-title, and I'll delete it, save my custom page template, reload my page and now I have a page with no title.
The custom page template is an often overlooked tool in the WordPress theme arsenal that allows you to create customized experiences for your visitors in a very simple way. The best way to get the most out of a custom page template is to simply start experimenting. And remember, there are no limits here. If the information exists, you can display it.
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.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.