Advanced WordPress

1.Advanced WordPress Themes

After installing and activating the theme, your website will look very much like the template. Thus you will need to customize the theme to suit your desires. If you are using a different theme, your options or experiences may differ (most themes have the same basic components, they just display them differently). However, these tips, tricks, and guides should give you a rough idea of the many possibilities there are for customizing your theme!

Tips & Tricks

There is not one right way to customize a theme. This is all to your tastes. Most theme configuration involves playing around with the different options and seeing what changes what and if you like it. WARNING: This can be a time-consuming process!

My strategy is to work down the column on the left-hand side of the dashboard under Appearance following the category Themes, which is where you chose the theme that you are now about to customize, and work through all the columns and sections within each category. This ensures that you know what you’ve played around with and what you still have yet to explore.

The Customize category gives you an overview of all the basic aesthetic changes that you can make. The categories below it (Widgets, Menus, Theme Options, and Backgrounds) all provide more in-depth ways to manage the theme’s appearance. Editor allows you to directly change the css.

Terminology

  • Site Title: This appears on the tab of your internet browser. It’s like a name tag for the site, so that if you have multiple tabs open, you can easily see which one is which.
  • Tagline: This appears both on the tab of your internet browser as well as on the home page of your theme.
  • Colors or Background Color: These are the colors that will be in the background of your website or blog. When choosing them, consider how contrast and visibility factor into the appearance; you don’t want something that makes it hard to read what’s there.
  • Background Image: If you don’t want to have color as your background, you can upload an image to serve as your background. However, if your image is too busy, it might reduce how easily people can read or navigate your site.
  • Widgets: These are independent sections of content that you can arrange and customize that appear on the sidebar of your blog or website.

How to Make a Subcategory in a Menu

  • In the menu section, select the categories or pages you want in the menu.
  • To make one of the categories or pages a subcategory to the other one and thus appear below it when you mouse over the parent category or page, drag the child page or category to the right until it remains bumped over on the menu list.

2.Child Themes

What is a Child Theme?

A Child Theme is essentially a copy of a theme that is completely customizable.

Why Should I Use Child Themes?

When you modify a WordPress theme, there is no guarantee that your modifications will be saved when the theme updates. A way to make sure that your edits to the theme last after updates is through creating a Child Theme.

How Do I Make a Child Theme?

Making a Child Theme is very simple, but will require you to go into your Domain Of Own’s Own File Manager.

Steps:

  1. When you login, you will see your Domain of One’s Own Dashboard. Scroll down until you see File Manager located under Files and click on it. A screenshot showing the files menu. An arrow points to the File manager icon
  2. A File Manager Directory Selection will appear. In it, make sure the the Document Root for: bubble is clicked. You need to also select the domain or subdomain you wish to create a Child Theme for. You can leave “show hidden files” checked. Then, click the Go button. This will take you to your cPanel File Manager. A screenshot showing the File Manager Directory Selection menu area. Document Root for is selected
  3. Next, you will see several folders both in the center and on the left hand side of the screen. Find the blue folder called wp-content and double click on it. If you are creating a Child Theme for a directory, double click on the blue folder with your directory name and then double click on the blue folder calledwp-content.A screenshot of the file manager. An arrow points to the "wp content" folder
  4. Once in the wp-content folder you will see more blue folders. Click on the folder called themes. This folder holds all of your installed WordPress themes. A screenshot with an arrow pointing to the themes folder
  5. In the themes folder you will see folders with the titles of your installed themes. What you want to do in order to create a Child Theme is click on New Folder, located at the top of the page. A screenshot showing the top of the page. An arrow points to New Folder
  6. In the text area for New Folder Name name it something that will let you know that it is a Child Theme. For example, if you want to make a Child Theme for Twenty Thirteen, then name your your child theme folder “twentythirteen-child.” Then click Create New Folder. A screenshot shoing the New Folder pop-up window. An arrow points to the create new folder button.
  7. Next, double click your new Child Theme folder to go inside of it. A screenshot showing the folder twenty-thirteen child selected
  8. Now add a New File by clicking on the new file icon at the top of the screen. A screenshot showing the file manager menu. An arrow points to the New File button.
  9. When naming the new file, this time you MUST name it style.css. A screenshot showing the new file popup menu. The New File Name is style.css
  10. After that new file is made, open it up by selecting it and clicking on Edit at the top of the screen. Click on Edit when the Text Editor box appears.
  11. Once inside your file, you need to add this code to the file. Copy the code in bold below and paste it into your file.
/* Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child */

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here -------------------------------------------------------------- */

A screenshot of the text file

  1. Once you have the code pasted into your file, you MUST change at the very minimum the Theme Name, the Template, and the @import url.
  2. Tailor your Theme Name, the Template, and the @import url to what your Parent Theme’s name is. For example, if I wanted to make a Child Theme of the theme Twenty Thirteen, I would change the text to look like so:
/* Theme Name: Twenty Thirteen Child
Template: twentythirteen

@import url("../twentythirteen/style.css");

/* =Theme customization starts here -------------------------------------------------------------- */
  1. After you have changed the Child Theme input names to your Parent theme’s names, you can click onSave Changes in the upper right hand corner.

15227866248_46c2e60313_b.jpg

Activating a Child Theme

Your child theme is now installed! Now you need to activate it.

  1. Login to your WordPress site.
  2. Once in your Dashboard, go to Appearance then Themes on the left sidebar.
  3. You will now see a your child theme there! Click on Activate to make it your theme.

Editing a Child Theme

As you can see, your newly activated Child Theme looks exactly like your Parent Theme. This is because the Child Theme pulls all of the design and structural elements from the Parent Theme. In order to make customizations, you need to edit your Child Theme. There are two ways you can go about editing your Child Theme.

Option 1:

You can go back into your File Manager and make your edits there in the style.css file underneath

/* =Theme customization starts here ————————————————————– */

Option 2:

You can add in your edits using the WordPress Dashboard interface. To do so, go to Appearance and then Editor in the left sidebar of the Dashboard. Type into the text area under Stylesheet (style.css), and then Save your changes.

Child Theme Examples

Below is the an example of a Child Theme in use. The Parent Theme is on the top, and the Child Theme is below.

Parent Theme

A screenshot of an example theme template

Child Theme

A screenshot of a theme

For more information, please visit WordPress’s support page for Child Themes.

Suggest Edit