A child theme can’t be applied as an afterthought; it needs to be set up early on. We recommend that you first decide what theme you’re going to use. Then install your chosen theme, but don’t make any customizations to it. Create a Child Theme and activate it, and begin customization. This is also a good time to import some sample content; we’ll show you how to do that below too.
Installing a theme
To install a theme you’ve already downloaded to your hard drive, go to Appearance > Themes in the Admin Main Menu.
If you have already downloaded a free theme or purchased and downloaded a theme, you should have a zip file (a file with the extension .zip which contains other files) on your computer’s hard drive containing the files that comprise the theme. Follow these steps to install it:
- Log into the Admin and click to Appearance > Themes.
- Near the top of the screen, click on the Install tab.
- Just below that tab, click the Upload link.
- Click Browse and navigate your own computer’s files to find and double-click the theme zip file.
- Click Install Now, and the theme will be uploaded and installed into the correct directory on your server.
- See the instructions below to activate that theme.
If you haven’t yet chosen and downloaded a theme, you can browse the WordPress Themes Directory, where there are over 2,500 themes available completely free.
Activating a theme
When we speak of the active theme, we mean the theme which is currently in effect. You can install as many themes as you like, and they’ll all appear on the Appearance > Themes main screen, but only one theme at a time can be active.
Feel free to install and activate a theme just to check it out, since it’s a simple process and can easily be undone — activating another theme automatically de-activates the one which is currently active. Keep in mind that once you’re sure you want to use a certain theme, in almost all cases you should proceed to set up a child theme and then activate it. Follow these steps to activate any theme:
- On the Appearance > Themes screen, near the top, click the Manage Themes tab.
- The currently active theme is shown close to the top of the screen.
- Lower on the screen, under Available Themes, you should see all of themes you’ve installed.
- Beneath the thumbnail image of the theme you want to activate, click the Activate link.
- The newly activated theme should appear in the Current Theme space close to the top of the screen.
A newly-activated theme may look a lot different than the theme demo
Don’t worry if a newly-activated theme doesn’t look much like the theme demo. In fact, your site may not look very impressive at all at this point. Normally it’s necessary to set up the home page with specific posts, pages, widgets, menus, and sometimes 3rd-party plugins to get that appearance. A decent theme will include some kind of instructions guiding you through that process.
Setting up a Child Theme
The most important point to keep in mind is that in almost all cases, you should not make customizations to a WordPress theme directly, but rather to the child theme you create for it.
You’ll need an FTP program and a code editor for this.
- On your local hard drive, navigate to the folder where the WordPress core files are. Click to the wp-content/themes folder. Inside it, you should see a folder for each theme which is installed. The current default theme Twenty Seventeen should have a folder there, and there should be a folder for any theme you installed.
- Inside of wp-content/themes, create a new empty folder, and give it a name without any spaces. This should be the name you want to use to refer to your child theme. Many people make this name the parent theme’s name with “-child” appended to the end, for example, TwentySeventeen-child. But you can name it anything you want — just no spaces or special characters other than hyphens or underscores.
- Now open your code editor — refer to the lesson on Installation if you don’t know what program to use. Create a new blank text file and name it style.css. It needs to have that exact name.
- Open style.css with your code editor and carefully copy-paste into it the code below.
/* Theme Name: Twenty Seventeen Child Theme URI: http://example.com/twenty-seventeen-child/ Description: Twenty Seventeen Child Theme Author: John Doe Author URI: http://example.com Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-seventeen-child */
As always when copying code, be extremely meticulous. Leaving out a semi-colon will cause a failure, so do your copy-pasting with care.
- Still in style.css, replace each of the fields above with the appropriate ones for your installation.
- A new step has been added recently to the child-theme setup process; this involves creating a functions.php file in your child theme and pasting some code into it. Please follow the instructions on this page of the WordPress Codex: https://codex.wordpress.org/Child_Themes. The instructions for this functions.php file can be found part of the way down the page. Create and save this file inside your child theme folder.
- Now, open your FTP program and connect to the server. Upload your new child theme folder. Be sure that it gets uploaded to the wp-content/themes folder on the server, and sits next to the other theme folders there.
- Now log into your site’s Admin and go to Appearance > Themes. If all went well, you should see your child theme listed under Available Themes.
- A thumbnail image for your child theme is optional, but if you’d like to create one, you’ll need an image editor. Create an image with the pixel dimensions 600 by 450 and save it as the image file type .png with the name screenshot.png. Copy this image into the child theme folder and upload it to the server. When you visit the Manage Themes screen in the Admin, your child theme should now display a thumbnail image.
- Click its Activate link, and your child theme is installed and activated. The website should look the same as it did with the parent theme activated.
Importing sample content
If you’re working on a new website which doesn’t have posts or pages yet, it can be hard to get a sense of how a theme looks and functions. Some sample filler content can be really useful. The people WPCandy.com offer a nice set of such content that can be easily imported into your site. Just follow these steps:
- Download the zip file of Sample Content to your hard drive. Double-click to open it and copy the one file you find inside, SampleContent.xml, to a location on your hard drive outside the zip file.
- From the Admin Main Menu, go to Tools > Import.
- On the Import screen you’ll see a list of different types of imports that can be done. Click on WordPress at the bottom of the list.
- On the screen that appears, click the big orange Install Now button. WordPress will download and install a plugin, as you’ll see on the next screen.
- Click Activate Plugin & Run Importer.
- On the next screen, click Browse and navigate to the SampleContent.xml on your hard drive. Double-click to select it.
- Click Upload file and import.
- On the next screen, you can choose a WordPress User to associate with the sample content. Create a new user named “Sample Content” and associate “him” with the imported posts and pages. This makes it easy to delete all of the sample content when you don’t need it anymore.
- Select the checkbox to Download and import file attachments. The attachments are just a couple of small image files.
- Click Submit, and the sample content is installed.
- Codex article, Using Themes
- The WordPress Theme Directory (Free, WordPress-approved themes)
- Codex article, Child Themes
- Article from ManageWP.com, How to Create a Child Theme in WordPress
- Article from WPTutsPlus.com, How to Customize Your WordPress Theme With a Child Theme
- Download zip file of Sample Content provided by WPCandy.com