Customizing WordPress – #3 (YouTube Video)

Customizing WordPress #3 – Understanding Template Files

LevelUpTuts
Published on Mar 6, 2014

The 3rd video in the Customizing WordPress tutorial series. Here we show you how to start overriding templates in your child theme.

Basically, your template files live in your theme folder.

If you want to change a template file you copy it to your child theme folder and make whatever changes you want in the copy template file in your child theme folder.

The next most important file after style.css in terms of over-riding your theme is your functions.php. (Both being in your child theme folder).

However, we’re going to go over templates first.

Our site is made up of many many PHP files. The template files are the php files that control what shows up on the page.

And the template files live in our Theme folder.

Right now the templates are from the themes folder

And we want to over ride those templates by placing them in the child themes folder and making changes.

1:50 – 320 When you highlight code in Chrome Tools, the corresponding part of the web page lights up. He explores the whole web page by  hovering on divs and collapsing and expanding them.

3:30 So say we want to modify the header. So what we can do is over ride that with a (child) template.  So we go to the header.php file in twenty fourteen and make a copy and past it in our child theme folder.

4:30 So he opens up the header.php file (in the child theme) in his text editor. And he quickly goes through the header.php file.

5:00 How do we know for sure that we’re using the child header.php. Well we put some code in at line 46: <h3>TEST</h3> and

fig4

And then we refresh our page and voila! We see TEST and we know the right file(the child theme header.php) is being read and our main theme header.php is being over ridden.

fig5

5:25 So we go back to the child header.php and get rid of the <h3>TEST</h3>

5:40 So now we have a working (child) header.php template that we can modify however we want.

5:50 For an example we’re going to get rid of the search in the header.

6:00 So what I would do is select the code below in the child theme’s header.php and delete it:

fig6

So we hit delete and click save and this is what our file looks like now:

fig7

6:30 But when we hit refresh, altho the search box is gone, the green toggle switch is still there.

fig8

6:40 So when you hover over the green toggle switch and right click and click inspect–Chrome Tools will show you where the toggle switch lives — see above. So you will just go to your child theme header.php file and delete the code outlined and save the file to save the change you just made.

fig9

And then go back to the page, hit refresh and the toggle switch is gone!

fig107:10 – 9:03 And if you change your mind about the changes you have made you can easily undo them. And in this segment he shows us several different ways.

This entry was posted in Coding, Open Source Software, Wordpress. Bookmark the permalink.