Mastering the visual aspect of your WordPress site can significantly enhance user engagement. Understanding the nuances of the WordPress appearance settings is key for anyone looking to create a visually appealing website.
One of the number one features of WordPress is the large number of themes (the design and layout your website will use) available for free and for a fee. Themes allow you to customize how your website looks and allows you to set it apart from other websites. The options that control the themes and other design and layout settings are found under the Appearance menu.
The Appearance menu has a number of submenus. The submenus include Themes, Customize, Widgets, Menus, Header, Background, and Theme Editor. The exact number may vary from site to site depending on what theme and plugins are installed. See the screenshot below.
WordPress Themes
When you first click on the Themes submenu under the Appearance menu you will be shown a list of all the themes installed on your WordPress site. For each theme you will see a preview or thumbnail detailing what the theme looks like and the name of the theme. By clicking on one of the theme previews, a popup will appear giving you more details about the theme.
The Theme Details popup gives you all the information you need to know about a theme. This information is provided by the theme designs and developers. Details included are the theme version, the name and website of the theme developer, a paragraph describing what you can expect from the theme, and a list of tags indicating the features that theme includes.
If the theme you are viewing the details for is active then at the bottom of the Theme Details popup you will notice 5 buttons - Customize, Widgets, Menus, Header, and Background. These buttons will allow you to preview design changes, such as background or font color, before publishing the changes permanently.
If the theme you are viewing the details for is not active then at the bottom of the Theme Details popup you will notice 2 buttons - Activate and Live Preview - as well as a red Delete link at the bottom right corner. This will remove the theme completely from the WordPress site.
By clicking the Activate button you will turn the theme on and clicking on the Live Preview button will display what your website will look like using the theme. Please note that the live preview is not always an accurate representation of how your website will look but it will give you a good idea.
You can quickly flip through the details of the themes installed on your website site by clicking the right and left arrow buttons at the top of the Theme Details popup. You can also close the popup by clicking the x in the right top corner. When you close the popup, the Themes page will still be displayed.
Adding a New Theme
You can install a new WordPress theme from the theme page by clicking on the Add New button at the top.
When installing a new theme you have two options, either upload a theme or choose a theme from the WordPress Theme Directory. After clicking the Add New button on the theme page WordPress will display available themes in the WordPress Theme Directory.
The WordPress Theme Directory allows you to quickly browse plugins by Featured, Popular, Latest, and Favorites or by simply searching for the features you want on the top white menu bar.
When you click on a theme in the WordPress Theme Directory the details of the theme will be displayed as shown below.
The details will tell you what you should expect from the theme and give you the option to install and activate the theme. You will also see a live theme preview showing what the site may look like if the theme is used. You can close the details popup box by clicking on the x in the top left corner.
To install a WordPress theme from another source, such as Thrive Themes, you would need to upload the theme zip file. If you do not have a theme zip file, please contact the site you purchased the theme from, and ask how to download the zip file.
To upload the theme zip file from the Add New Theme click on the Upload Theme button at the top.
When clicking on the Upload Theme button a new section will appear above the WordPress Theme Directory as shown below.
Click on the Choose File button and then navigate to the folder on your computer where the theme zip file resides and select the theme zip file. Once the correct theme zip file is selected click on the Install Now button. WordPress will then upload the zip file to your site and unzip the files in the appropriate place. Once completed, the WordPress theme you just installed will now appear on the Theme page.
The WordPress Customizer
The WordPress Customizer allows you to easily make changes to the design and format of your site without editing code while displaying a preview of the changes. The design elements you will be able to change will depend on the theme the WordPress site is using. Some themes will give you more options than others. The WordPress Customizer is found under the Appearance menu in the Customize submenu option.
The left panel of the customizer will display your options and the right panel while giving a live preview of the changes. In addition to making design changes, from the left panel of the customizer you also change the active theme.
Site Identity - This selection allows you to upload a logo image, set the name and tagline of the site, and set the site icon (the tiny icon shown in browser tabs).
Colors - The color selections will depend on the theme used, but most themes allow you to choose a basic color scheme and customize the background color, link color (when you link text to another page), main text color, and secondary text color (such as headlines).
Header Image - Change the header image the WordPress site uses by adding a new image in this section. Make note of the recommended image size for the best results.
Background Image - If you wish to use a background image on your website, you can add it here. Once an image is selected more options will be available. You can remove or change the image, change the image position, the image size and if the background will repeat and scroll.
Menus - All menus can be altered in the customizer. Simply select the menu to edit the menu or even create a new menu. Menus can also be assigned to locations in this area.
Widgets - Easy edit, add or remove widgets from the sidebars in the customizer. Please note that not all widget areas may be available to customize through the customizer.
Homepage Settings - The homepage settings under the Customizer allows you to choose which type of content is shown on the homepage - your latest blog posts or a specific page. This setting can also be found under The Reading Settings.
Additional CSS - The additional CSS area is the preferred method for adding CSS style code to your site. It does not directly edit your theme style.css file.
WordPress Widgets
Widgets in WordPress are blocks of data that are displayed on your site. There are thousands of widgets currently available and will vary from site to site depending on the theme and any plugins installed.
Widgets can be accessed under the Appearance menu. When you first visit the Widgets page you will be shown two columns - Available Widgets and the Active Widgets Area.
The available widgets will vary from site to site. Some will have more and some will have less but all WordPress sites have the following:
To the right of the widget settings page is the area where you can assign widgets to specific locations such as a sidebar or footer area. This varies from site to site depending on the theme or plugins installed.
Add a Widget
To add a widget simply click on the widget you wish to add, choose the location, and click on the Add Widget button as shown in the screenshot below.
You can also click and drag the widget to the location to add it.
Each widget will have a set of settings you can set accordingly. Below is an example of the settings for the Categories widget.
You can remove or move widgets to another location by clicking and dragging the widget to the desired place.
If you wish to remove a widget without losing its settings, simply move it to the Inactive Widget area. If you change your mind later, it is easy to add it back with the settings intact.
WordPress Menus
The menus submenu under the Appearance menu controls what pages and links are added to the navigation menu on the website. This is normally the main menu found at the top of most websites with links to the homepage, about page, blog, and contact page. You can add any page or link desired to a menu.
When the Menus submenu is displayed you will notice 2 tabs - Edit Menus and Manage Locations.
Editing Menus
When you open the Menus settings the Edit Menus tab will automatically be displayed with a panel on the left named Add Menu Items with Pages, Posts, Custom Links, and Categories. These are the options you have to add to your menus.
The panel on the right is the structure of the menu. When you add an element from the panel of the left a new block will appear at the bottom of the menu structure on the right. You can change the order of menu items by hovering over the menu item until you get the cross icon and clicking and dragging the menu item.
At the top of the Edit Menu tab is a dropdown box giving the option to chose which menu to edit and the option to create a new menu. You can create as many menus as you wish, there is no limit.
To create a new menu, simply click on the link, name the menu, and hit the Create Menu button.
Once the menu is created you can add any pages, posts, custom links, or categories you desire.
Menu Settings
At the bottom of the Menu Structure panel is the Menu Settings.
Auto add pages - If checked, this option will automatically add any new pages you publish to the menu.
Display location - This determines where the menu is displayed. For example, in the screenshot above if the Primary Menu is checked, the menu will be shown as the main navigation menu at the top of the site. Please note that options will vary from site to site depending on themes or plugins installed.
Manage Menu Locations
The Manage Locations tab of the Menus settings allows you to assign menus to specific locations.
The WordPress theme used will determine how many menu options are available. In the example above, the Primary Menu is used at the top of the site and the Social Links Menu is used at the bottom of the site. Two separate menus could be created, one for each location, and then assigned appropriately.
To see what your site will look like with the menu change, simply click the Manage with Live Preview button at the top of the Menus setting page. This will open the WordPress Customizer with the menu options available.
Header
Most WordPress themes will allow you to customize the header, the image or logo used for the title of the site, to match the branding of the business of the site. By clicking on the Header submenu of the Appearance menu, the WordPress Theme Customizer will appear allowing multiple options for the header.
The theme should inform you of the optimal dimensions for the header image. Add the header image by selecting the Add New Image button. You can either select an image from the Media Library or upload a new image. If the image chosen is not the correct size you will be given the choice to crop the image to ensure the area shown is selected. See the screenshot below.
You can either skip the cropping or indicate the cropped area by moving the outlined area to the correct position. Please note this does not alter your original image. WordPress simply makes a copy of the image with the changes.
Once the image is selected and cropped, or not, depending on your choice, WordPress will display a live preview of the site with the new header image.
If you are happy with the choice click on the Publish button to make the changes to your site. The options shown in the Header Image panel will vary from site to site depending on the theme and plugin installed.
Many themes will allow you to randomize the header image between multiple headers. If you wish to take advantage of this option, simply upload multiple header images and click on the Randomize Uploaded Headers button.
You can also hide (remove) or change the header image at any time.
Background
Most WordPress themes will allow you to customize the background used in the theme to match the branding of the business of the site. By clicking on the Background submenu of the Appearance menu, the WordPress Theme Customizer will appear allowing multiple options for the background.
Some themes will allow you to select an image to use as the site background and some will allow you to choose a solid color. The options that appear will vary from site to site depending on the WordPress theme installed. Once a choice has been made, a live preview will appear giving you an idea of how it will look.
To choose a background image, as shown in the screenshot above, simply select on the Select Image button. You can choose an image already in the media library or upload a new image.
Once an image is chosen more options will appear. You can remove or change the image, change the image position, the image size and if the background will repeat and scroll.
Image Position - The image position decides where to start displaying the image. If the centre is chosen, the image will be aligned in the centre of the website. If the top right corner is chosen, then the image will be positioned at that starting point. This can be helpful to ensure important areas of the image are visible.
Image Size - The image size dropbox box gives you three options, Original, Fit to Screen, Fill Screen. The Original option will leave the chosen image exactly as it. Fit to Screen will resize the image to best fit the size of the web browser being used to view the website. The Fill Screen option will do as it implies - fill the entire screen with the image. This option may cause the image to appear fuzzy or enlarged.
Repeat Background Image - If the image does not fill the entire screen the image will repeat until it does if this option is checked.
Scroll with Page - The Scroll with Page option allows the background to move with your content when a user scrolls down the page. If unchecked, the background will stay static and not move.
WordPress Theme Editor
The Theme Editor allows an administrator on your WordPress site to directly edit the theme files. Doing this requires HTML, PHP, JavaScript, and CSS programming knowledge. If you are not familiar with the required programming language, do not edit it. If you do decide to edit the theme files directly create a backup of your WordPress site first.
The editor is displayed on the left and a list of files in the theme on the right. To change the file being edited, click on the file name you wish to edit on the right. Be sure to select the correct theme from the dropdown box at the top right. You don’t want to edit the wrong theme. When you have made the desired changes click on the Update File button at the bottom to save the changes.
Please note that CSS changes should not be made in the style.css file but rather in the CSS Editor under the Customizer in the Appearance menu.
