fff Archives - A1WebsitePro.com

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?vC2C1KFG3MV8 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. 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. 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. Navigate to your parent theme in your text editor like notepad++. Double click on the file and load it into your text editor. Copy everything in that file by hitting "control a" then "control c" on your keyboard. Now navigate to your child theme and create a new file called header.php 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. 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. 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. How to add a widget There are 5 different steps we have to take to get a widget into our header.php. Edit your functions.php file. Add a sidebar-head.php file Place the widget code in the header.php file Insert a widget 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. 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. 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. 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. 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". Now go to the front end of your website and look at the changes. 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. Open up you're website in your browser and right click over your widget and inspect 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. After you have done this you will see the changes take place. 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. page.php file - this is when a user create a page in the dashboard. single.php file - this is when a user creates a post in the dashboard category.php file - this is where people see a list of posts in a particular category 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 comments.php file - you can style the way you want your comments to appear on your website. 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.

fff

CHILD THEMES IN WORDPRESS FOR BEGINNERS PART 3 FILES

Style HTML Tables With A Lot Of Content

Make a Smiley Face in CSS

Create a Facebook Icon in CSS