CHILD THEMES IN WORDPRESS FOR BEGINNERS PART 3 FILES

Welcome to part 3 Child Themes in WordPress for Beginners

For those of you arriving at this post this is a continuation of the Child Theme in WordPress series. Make sure that you have completed part 1 and part 2 before attempting to do the following tutorial.
https://www.youtube.com/watch?v=C2C1KFG3MV8

Advantages of Having a Child Theme

The advantages of having a child theme is that when the parent theme needs updated your changes to the child theme will not change.

update to parent themes do not affect child themes

update to parent themes do not affect child themes

Files From The Last Lesson

Here is a copy of the files from the last lesson. child

Files in Child Themes for WordPress

You have learned that when you create a style sheet in the child theme that it will take precedence over the parent theme. You can get the look and feel that you want by editing the style sheet.

Only cool people share!

Copying files like header.php, footer.php etc is no different. The benefit of copying these files into your child theme is that you can manipulate them.

We are going to work with the header.php to show you how you can make this work for you.

Steps to copying a file from a parent theme to a child theme.

  1. Navigate to your parent theme in your text editor like notepad++.

    navigate to the header.php in parent theme

    navigate to the header.php in parent theme

  2. Double click on the file and load it into your text editor.
  3. Copy everything in that file by hitting “control a” then “control c” on your keyboard.
  4. Now navigate to your child theme and create a new file called header.php

    create header.php in child theme after copyiong it from parent theme

    create header.php in child theme after copying it from parent theme

  5. Paste the contents from the parent header.php to the child header.php and save it.

Editing the header.php in the Child Theme

Now that we have the header.php in the child theme we can do whatever we want to it. We notice in the code below that our site title is in a h1 tag.

[code]<h1 class="site-title"><!–?php <span class="hiddenSpellError" pre="php " data-mce-bogus="1"–>bloginfo( ‘name’ ); ?>[/code]

Maybe we want to put that into an h2 tag for Search Engine Optimization purposes. Having any more than 1 h1 tag on a webpage is not good for a website. Let’s change that h1 tag to a h2 tag.

[code]<h2 class="site-title"><!–?php <span class="hiddenSpellError" pre="php " data-mce-bogus="1"–>bloginfo( ‘name’ ); ?>[/code]

Adding a Widget to header.php

Maybe you want to add a widget to the header in your child theme. There could be many reasons for this. Here are a couple.

  • You want to put an ad at the top of your website.
  • You want your Google analytics code at the top of your website.
  • You want to have a site wide message

Here is the widget areas in the dashboard. We will be adding another widget area in the steps below.

widget areas in the dashboard

widget areas in the dashboard

How to add a widget

There are 5 different steps we have to take to get a widget into our header.php.

  1. Edit your functions.php file.
  2. Add a sidebar-head.php file
  3. Place the widget code in the header.php file
  4. Insert a widget
  5. Style the widget

1. Edit your Functions.php file

Navigate to your parent theme to wp-content, themes, twentythirteen, the load functions.php into your editor.

Look for this code and copy it.

copy widget functions in the parents function.php file

copy widget functions in the parents function.php file

[code] register_sidebar( array(
‘name’ => __( ‘Main Widget Area’, ‘twentythirteen’ ),
‘id’ => ‘sidebar-1’,
‘description’ => __( ‘Appears in the footer section of the site.’, ‘twentythirteen’ ),
‘before_widget’ => ‘
<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class="widget-title">’, ‘after_title’ => ‘</h3>’,
) );[/code]

Now open your functions.php file in your child theme and paste in the code below the other code that you have in there. We will have to edit the code so that our child theme understands it. Here is the completed code to add in your functions.php file.

[code] register_sidebar( array(
‘name’ => __( ‘Header Widget Area’, ‘twentythirteen’ ),
‘id’ => ‘sidebar-3’,
‘description’ => __( ‘Appears in the header section of the site.’, ‘twentythirteen’ ),
‘before_widget’ => ‘
<aside id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class="widget-title">’, ‘after_title’ => ‘</h3>’,
) );[/code]

2. Add a sidebar-head.php File

Now we need to create a file in our child theme that is going to hold the information from the widget. In your child theme create another file called sidebar-head.php and insert the following code into it.

[code]<?php
/**
* The sidebar containing the header widget area
*
* If no active widgets in this header, hide it completely.
*
* @package WordPress child theme by Maximus McCullough
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/

if ( is_active_sidebar( ‘sidebar-3’ ) ) : ?>
headwid" class="sidebar-head" role="complementary"></pre>
<div class="widget-area">
<!–?php dynamic_sidebar( ‘sidebar-3’ ); ?–></div>
<pre><!– .widget-area –>
<!– #secondary –>
<!–?php endif; ?–>[/code]

NOTE: Notice we have changed the div id and the class so that we can style the widget ourselves.

3. Place the widget code in the header.php File

Open up your header.php file in your child theme and place the short php code below after the div id of page. Save all your changes.

[code]<?php get_sidebar(‘head’);?>[/code]

place widget code in header.php after that page div id

place widget code in header.php after that page div id

4. Insert a Widget

Now go to your dashboard and add a text widget. Give it a title of “My Custom Widget” and put text in that says “This is my custom widget”.

add a widget

add a widget

Now go to the front end of your website and look at the changes.

custom widget in header.php file

custom widget in header.php file

5. Style the widget

Now we can style our widget in the header. This time we will have to add our is to our style sheet first. Open up your style sheet in your child theme and add the following lines of code and save the file.

[code]#headwid, .sidebar-head{
}[/code]

Open up you’re website in your browser and right click over your widget and inspect element.

style the widget by right clicking and inspecting element

style the widget by right clicking and inspecting element

New we are ready to enter commands into the browser. Enter your style commands in the browser and copy/paste them into your child theme stylesheet. We did this in the second lesson so you should be familiar with it.

[code]#headwid, .sidebar-head {
background-color: #666;
color: #fff;
text-shadow: 1px 2px 3px #000;
}[/code]

After you have done this you will see the changes take place.

making changes in the stylesheet

making changes in the stylesheet

Summing it all up

In this lesson we see that we can copy files from the parent theme and use them to our advantage. We can also copy functions and edit them to make them work for us. You can copy any file from a parent theme. There are several of them. Here is a small list of files that you can copy and style yourself.

  1. page.php file – this is when a user create a page in the dashboard.
  2. single.php file – this is when a user creates a post in the dashboard
  3. category.php file – this is where people see a list of posts in a particular category
  4. archive.php file – this is similar to the categories only its called an archive file where people see a daily, monthly or yearly list of archives made on the website
  5. comments.php file – you can style the way you want your comments to appear on your website.
  6. index.php file – this is a list of all the latest posts on your website.

There are several files in a theme that you can style. you can input things like a widget like we did in this lesson. You can also take out things and change div and class id’s to make the child theme work for you.

 

CHILD THEMES IN WORDPRESS FOR BEGINNERS PART 3 FILES was last modified: September 5th, 2016 by Maximus Mccullough
WordPress-Child-Theme-Creation-Tutorial-Part-3

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.