- Choosing a Theme for Your Site
- Customizing Your Theme
- That's It, You're Done!
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Customizing Your Theme
Using the Theme Customizer, you can make changes to a theme without touching the underlying files, and you'll see your changes in the preview in real time.
Customizing Your Site's Title and Tagline
Click the arrow to the right of the Site Title & Tagline option to see your site's current title and tagline (see Figure 4). Change the title, tagline, or both as desired. If you want to hide your site's title and tagline, displaying only your header image, deselect the Display Header Text checkbox (see Figure 5).
)
Figure 4 Your site's title and tagline can be changed and displayed or hidden using this option.
)
Figure 5 The same header, with the title and tagline displayed (top) and hidden (bottom).
Selecting Colors
With the Theme Customizer, you can change your site's color scheme as many times as you want, previewing your choices until you like the result. Click the arrow to the right of the Colors option to expand this section of the Theme Customizer, showing the colors of your site's current header text and background (see Figure 6). Then click the arrow to the right of the color swatch below Header Text Color or Background Color to open the appropriate color picker (see Figure 7). Click the color you want, or enter the color's hexadecimal value in the text box.
)
Figure 6 The Colors option allows you to make changes to your site's color scheme.
)
Figure 7 Use the color picker to choose the color you want, or enter the color's hexadecimal value in the text box for more control. The theme preview on the right updates to show your new color scheme. You can change color schemes as many times as you want!
Displaying or Removing a Header Image
Click the arrow to the right of the Header Image option to expand this section of the Theme Customizer. Your current header image is displayed; click the arrow to the right of the header image to view your available options. (If your site doesn't have a header image, the Header Image box will be blank; click the arrow to the right of the blank box to expand the upload section.)
To upload a new header image, drag-and-drop an image file into the Upload New section, or click the "select a file" link (see Figure 8). When your new header image has uploaded, it will appear at the top of the live preview (see Figure 9) as well as in a new Uploaded tab (see Figure 10).
To remove the header image entirely, click the Remove Image link at lower right.
)
Figure 8 Upload or remove a header image in this section.
)
Figure 9 Your new header image will replace the default image at the top of your theme's live preview.
)
Figure 10 A new Uploaded tab appears after you upload a header image, allowing you to choose from any previously uploaded headers.
Displaying or Removing a Background Image
Click the arrow to the right of the Background Image option to expand this section of the Theme Customizer. Your current background image is displayed; click the arrow to the right of the background image to view your available options. If you don't have a background image, "No Image" will be displayed, as shown in Figure 11.
To upload a new background image, drag-and-drop an image file into the Upload New section, or click the "select a file" link. When your new background image has uploaded, it will appear in the live preview (see Figure 12) as well as in a new Uploaded tab (see Figure 13).
Choose the options for the background image as desired. You can set the background to repeat or tile, and you can control the horizontal positioning of the image. Another option lets you specify a preferred attachment setting. For example, if you want the background image to stay in one place while the content scrolls over it, choose Fixed. If you want the background to scroll with the rest of the content, choose Scroll.
To remove the background image entirely, click the Remove Image link at lower right.
)
Figure 11 If your site has a background image, it will be displayed in the swatch box under Background Image. If you haven't specified a background image, the words No Image will be displayed instead.
)
Figure 12 Your newly uploaded background image will display in the theme's live preview. If you don't like it, upload another!
)
Figure 13 Click the Uploaded tab to choose from any previously uploaded background images.
Controlling the Navigation
Click the arrow to the right of the Navigation option to expand this section of the Theme Customizer. If you have multiple navigation menus (for example, a sidebar menu as well as a main menu), you can choose the one you'd like to assign to your primary menu. Click the drop-down menu below Primary Menu and choose the menu you want to use for your main navigation (see Figure 14).
)
Figure 14 Use any of your existing menus for your main navigation by choosing it from the Primary Menu drop-down.
Using a Static Front Page
Click the arrow to the right of the Static Front Page option to expand this section of the Theme Customizer. Use this feature to control whether the front page of your site displays your latest posts or a static page. By default, WordPress sites display your posts on the main landing page of your site. If you choose to use a static front page, choose that front page from the Front Page drop-down menu, and choose the page to display your posts from the Posts Page menu (see Figure 15).
)
Figure 15 Change the look of your site by choosing a static front page. Display your blog posts on a separate page by choosing a posts page.
Saving and Activating Your Settings
When you're happy with the changes you've made in the Theme Customizer, click the blue Save & Activate button at the top right of the Theme Customizer sidebar (see Figure 16) to save your settings and apply them to your site. If you want to exit the Theme Customizer without saving your changes and applying them to your site, click Cancel.
){kind=small}
Figure 16 When you're happy with your changes, click the Save & Activate button to apply them to your live site.