×
View Categories

How to Customize Your Website’s Theme

3 min read

Access the Theme Customization Page #

In order to customize the theme, you are using on your website you will need to login into the WordPress admin area for your website and then navigate to Appearance→Customize.

appearance-customize

The customization page this tutorial will cover is for WordPress version 3.8.1, however, customizing themes in order versions should be similar to the bellow described process.

STEP

Customize the Site Title #

As soon as you access the Customize page after clicking on that link you will be able to notice the theme you are currently using at the right part of the screen and also the vertical customization menu located at the left part of the page.

customization-screen

Of course, this tutorial assumes that you are using one of the default themes provided with the initial installation of WordPress, however, if you have any custom installed themes the editing options on that page might be more than the described in this tutorial.

The customizable elements for your theme contained in the left vertical menu are as follows:

  • You are previewing  – The theme name for the theme which appearance you are editing. In this tutorial, we will edit the default “Twenty Fourteen” theme.
  • Site Title & Tagline – This section provides options for you to consider for setting up the Site Tittle and also the Tagline separately. For the purpose of this tutorial, we will set these with example values. Of course, if you would like this text displayed you should also make sure that there is a check on Display Site Title & Tagline.

site-title-tagline

These changes will be applied directly to the website tittle in the right theme preview part of this page.

example-title

  • Colors – This section will allow you to edit the color of the background for your website and also the color of the title for your website. Note that the background for this theme is visible only on big resolutions like widescreen monitors for example. For the purpose of this tutorial, we will update the colors appropriately.

text-colors
In order to preview the changes you have just made you should be able to notice that the title color has been changed in the right template preview part of this page.

example-text-colors

STEP

Customize the Background #

This section will allow you to change the background image of your website. If you have not uploaded any images into your media library then you will be presented with the option to upload such in order to use it as background.

background-image

  • Background Repeat – This option is if you would like to repeat the background image. Usually, this is used for pattern type of images which are forming a nice looking background if repeated.

background-image-repeat

  • Background Position – The actual position of the background image. Note that this will matter only if the “No Repeat” option is selected from the previous repeating option.

background-position

  • Background Attachment – This option is used if for example, you would like your background to remain on focus no matter how much you are scrolling on the page.

background-attachment

  • If however, you have already uploaded images you can simply switch to the Uploaded images tab located right next to the Upload New tab. There you will be able to select one of the images you have already uploaded to your website.

Once you select the image you will be provided with the background options you will also need to configure:

  • Static Front Page – This section is used for changing the landing page when someone visits your website. With the default settings after a clean WordPress installation (without any changes being performed to the style of your website) all of your latest posts are displayed at the Home Page for your website. Using this option will allow you for example to choose a static page (most commonly called a splash page) where you might input some welcome message to the users visiting your home page. It can be easily achieved by simply choosing the “A static page” option and then selecting one of your existing pages.

front-page-display

STEP

This section is used for defining the featured content you would like displayed on your website. The next couple of options will allow you to configure the featured content of your website

  • Layout – The actual layout of the featured content. The available options here are Grid and Slider.
  • Tag Name – The name of the tag which the featured components will be fetched. For example, all of the posts you would like displayed as featured should contain the featured tag in their tag list.
  • Don’t display tag on the front end – If this checkbox is checked the actual tags for your posts will not be displayed on your front page.

featured-content

With all these settings configured properly, you can achieve a great-looking theme configuration that will make your website esthetically unique.

Congratulations! You can now fully customize the theme of your website!

Leave a Reply