4.1: Building and Modifying Themes
WordPress 201 Section 4 Building and Modifying Themes
4.1-1 Creating WordPress Child Theme
During this course we will be using a core WordPress theme to create our very own using a Child Theme.
A child theme is a theme that inherits the functionality and styling of another, called the parent theme.
By using child themes you are able to create an instance of the same theme to protect your changes upgrades made by WordPress.
First you will want to
To create your first child theme you will need to create a new folder under the wp-content folder inside of your new install of Wordpress at the folder path: Applications/MAMP/htdocs/yoursite/wp-content/themes/
Figure 4.1.1
The folder that is created here is called newtheme, feel free to title it what you want but you will need to keep that name in mind for later.
Figure 4.1.2
The only thing you will need to create a child theme is a style.css file. But to get that theme to show up you need to put it in the correct area and also have the proper text added to it.
First open your text editor (we will be using brackets) and create a new file now save it back to your theme folder (Applications/MAMP/htdocs/yoursite/wp-content/themes/diamonddog) and name it "style.css".
/*
Theme Name: diamonddog
Description: Twenty Seventeen Child Theme
Author: your name
Template: twentyseventeen
*/ Figure 4.1.3
Now that the file is created you will need to add the above text to the top of the file.
Now that you have added that text to the file it will show up as a selectable theme in WordrPress. But to make a usable child theme of twentyseventeen we need to link all of the base files to that newly created theme we have to add one more bit of code to that file.
@import url("../twentyseventeen/style.css"); Figure 4.1.4
The above code will solidify your new child theme. Once it is completed your file will look like the following:
Figure 4.1.5
4.1-2 Picking and Configuring your Child Theme.
Now that your theme has been created you will now need to connect it and add some basic essentials so we can begin finalizing your theme.
Figure 4.1.6
First login in to the dashboard and go to Appearance and themes. Once there you will see your new theme as well as the TwentySeventeen theme. To start off we will click on the activate button (if not already done so) for twentyseventeen.
Figure 4.1.7
Once the theme has activated you will now need to customize that theme by rolling over the theme.
Figure 4.1.8
Now you will see a button on the theme called Customize. Press this button and it will bring you into a new screen.
Figure 4.1.9
Now press the X button at the top left hand corner of the screen. Although this seems odd but this will add some default content to your WordPress install that you will need as you move forward.
Now that you have added the content you can now select your new theme and begin customizing a portion of it via the WordPress dashboard.
Figure 4.1.10
To begin you will be activating your new theme via the same panel in the Appearance/Themes. Next press the customize button that you did earlier although now it will be located on your new theme.
Next you will be led into a page with a number of items on the left side of the screen.
Figure 4.1.11
This will let you customize your theme with a number of different of options.
Figure 4.1.12
You edit each portion of your site either by using the graphical menu on the left or the pencil icons next to each portion of the site
Figure 4.1.13
We suggest that you start with graphical menu on the left to start with. This way you don't miss any major necessary changes and then use the icons later for quick changes later.
4.1-3 Site Identity
First you will be starting with your site Identity.
Figure 4.1.14
Site Identity is the basics of your website header and Webpage tags. You are able to upload a site log change the name of your site title and add your marketing tagline. You can even turn off your entire Site Title and tagline and replace it with just your logo.
Figure 4.1.15
We have decided to make some modifications to our site to show you how things can change just by a media upload. To add a logo or site icon you must upload a image that is basically a square (512x512) to have the best results with Wordpress. Let's add a logo.
Figure 4.1.16
Next click the select image button on your screen.
Figure 4.1.17
That will bring up a window that will let you pick a image from your local computer or your media library.
Figure 4.1.18
Figure 4.1.19
Then you can press the select files button or pick media library at the top of the screen and pick from you local online library.
Figure 4.1.20
Figure 4.1.21
Once you find your file you can then select it and press the blue select button.
Figure 4.1.22
This will add your logo or site icon depending on which picture you loaded. You can slowly start to see how things can change easily with a small amount of effort.
Figure 4.1.23
You have a number of different options on how you can publish it by pressing the gear icon next to publish . You have the ability to save a draft by copying the url at the bottom of your options window so you can share with your clients or partners before you publish it. Or if you want to schedule your changes for the next day or specific time you can do that through the schedule button.
Figure 4.1.24 Now if you are ok with your changes you can press the publish button at the top left of your screen.
Figure 4.1.25 If your changes published properly you will see the wording Published instead of Publish.
4.1-4 Colors
The next set has to deal with the very obvious notion of your site colors.
Figure 4.1.26
There are two themes that are light and dark which will invert your base colors of your website.
Figure 4.1.27
Figure 4.1.28
You can also customize the menu text by picking the custom option.
Figure 4.1.29
This will change the color of the text button roll over but not the background of your site.
Figure 4.1.30
You can also change the color of the header text in your site by using the header text option of your site.
Although changing the color of certain elements can be fun always keep in mind that all of these items need to be able to be seen on any surface or picture. Make it your own but be sure to check and make sure can still see your text and logo on all pages.
4.1-5 Header Media
The next menu item, header media, is used for changing the top header picture on your website.
Figure 4.1.31
Currently on our test site the picture is set as a large aloe plant. There is a large blur behind the location of the logo so that allows for maximum visibility of your logo and text. All images need to be picked out with this in mind to keep your logo and text visible.
Figure 4.1.32
The first option that you see is the ability to upload videos. You can upload a video directly from your computer or you can use a youtube video url. All videos need to be at least 2000px by 1200px.
Figure 4.1.33
You can also upload a new header image by scrolling down viewing the current header image. You can add a new image by clicking the add new image button and following the same process as your logo.
Figure 4.1.34
You also can use a randomize option where you can load many images and have a new one load each time you got to a new page on your website.
Although there are some more options underneath the customize tab we are going to step out and configure the other options through the full menus.
Last updated
