Back to Guides

5.7 – Appearance

The Appearance section provides options for controlling how the content of a site is displayed. It is subdivided into the following sections:

  • Themes
  • Customise
  • Widgets
  • Menus
  • Editor

Themes

A Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files (*.jpg, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php)./

Get New Themes

The WordPress Theme Directory is the official site for WordPress Themes which have been checked and inspected, and are free for downloading. The site features the ability to search by type and style, and offers a demonstration of the page view elements of the Theme.

Using Themes

WordPress currently comes with three themes: the default Twenty Fifteen theme, and previous defaults Twenty Fourteen theme and Twenty Thirteen theme. The Genesis Framework has a Sample Theme which can be downloaded for free. You can switch between Themes using the Appearance admin panel. Themes that you add to the theme directory will appear in the Administration Screen > Appearance > Themes as additional selections.

Adding New Themes

If the Theme that you are installing provides instructions, be sure to read through and follow those instructions for the successful installation of the Theme. It is recommended that Theme developers provide installation instructions for their own Themes, because Themes can provide special optional functionality that may require more steps than the basic installation steps covered here. If your Theme does not work after following any provided instructions, please contact the Theme author for help.

Adding New Themes using the Administration Panel

You can install themes directly to your blog by using the Add New Themes option in the Appearance sub-menu:

  • Log in to the WordPress Administration Panels.
  • Select the Appearance panel, then Themes.
  • Select Add New.
  • Select Upload Theme.
  • Drag and drop, or select, to upload a zipped copy of a Theme that you have previously downloaded to your machine.
  • Follow the instructions below for selecting the new Theme.

Adding New Themes Manually (FTP)

To add a new Theme to your WordPress installation, follow these basic steps:

  • Download the Theme archive and extract the files it contains. You may need to preserve the directory structure in the archive when extracting these files. Follow the guidelines provided by your Theme author.
  • Using an FTP client to access your host web server, create a directory to save your Theme in the wp-content/themes directory provided by WordPress. For example, a Theme named Test should be in wp-content/themes/test. Your Theme may provide this directory as part of the archive.
  • Upload the Theme files to the new directory on your host server.
  • Follow the instructions below for selecting the new Theme.

Selecting the Active Theme

To select a Theme for your site:

  • Log in to the WordPress Administration Panels.
  • Select the Appearance panel, then Themes.
  • From the Themes panel, roll over the Theme thumbnail image for the Theme you are interested in to see options for that theme.
  • You can view more information about any theme by clicking Theme Details.
  • A live preview of any Theme (using your site’s content) can be seen by clicking Live Preview.
  • To activate the Theme click the Activate button.
  • Your selection will immediately become active.

Note: If the Theme preview is blank, do not activate the new Theme without investigating further. Your site may not be displayed correctly, otherwise.

Uninstalling Themes

If you deactivate a theme the files for that theme will still be present. To completely uninstall a theme from your site use one of two methods:

  • Deactivate the theme then select Theme Details then select Delete.
  • Delete the files from the server by FTP.

For more information on Themes from the WordPress Codex see here.

Customise

The Customize Screen displays the settings that can be customized for a specific theme. This option will only be present if the Theme author has configured the theme to allow this capability.

Widgets

Widgets add additional content and features to your WordPress site’s sidebars. The default widgets which can be added to sidebars include:

  • Archives – displays archive links for each month that has posts.
  • Calendar – displays a calendar of the current month. Dates appear links if there are posts for that day.
  • Categories – displays a list of post categories as links to those posts.
  • Custom Menu – displays a custom menu.
  • Meta – displays links to meta functions such as Register, Site Admin, Login/out, Entries RSS, Comments RSS, and WordPress.org.
  • Pages – displays a link to each Page.
  • Recent Comments – displays a list of the blog’s most recent approved comments.
  • Recent Posts – displays list of the blog’s most recent posts.
  • RSS – displays an RSS Feed. Multiple instances of this widget can be added to the Current Widgets list. Using RSS Widgets lists several feeds to use with this widget.
  • Search – displays a Search box to enter text to search your blog. A submit button is also provided.
  • Tag Cloud – displays list of the blog’s top 45 used tags in a tag cloud.
  • Text – used to enter HTML, JavaScript, or just plain text. Multiple instances of this widget can be added to the Current Widgets list.

The location of the sidebars the widgets can be added to will depend on the theme (WordPress) or child theme (Genesis) you have active and the page template used.

The widgets themselves they can be configured by logging into the site and going to Dashboard > Appearance > Widgets. On the left side of the page the available widgets will be listed. This list will include the default widgets from WordPress and Genesis plus any additional widgets added by plugins and the active theme/child theme. On the right side of the page you’ll see all of your widget available widget locations.

widget panel

Drag and drop the relevant widget into the relevant widget area (sidebar) and then adjust it’s settings and add any content. Save any changes. The widget will now display as set on the site. To remove the widget simply drag the widget back or click delete.

The Help tab towards the top of the screen provides information on removing and reusing widgets and how to handle missing widgets if you change your WordPress theme.

Additional information can be found here.

Genesis Widgets

The Genesis Framework adds a number of widgets for use as deemed fit. As with all widgets they can be configured by logging into the site and going to Dashboard > Appearance > Widgets. Drag and drop the relevant widget into the relevant widget area (sidebar) and then adjust it’s settings and add any content. Save any changes. The widget will now display as set on the site.

The Genesis Framework widgets are as follows:

  • Featured Page Widget
  • Featured Posts Widget
  • User Profile Widget

Featured Page Widget

Here is what each option included in the widget interface does:

  • Title – the title of the widget.
  • Page – the page to be displayed.
  • Show Featured Image – displays the featured image of the page.
  • Image Size – multiple sizes as set per child theme.
  • Image Alignment – display the image aligned left or right of the content.
  • Show Page Title – displays the title of the page to be displayed.
  • Show Page Content – displays the complete content of the post including images, the “More” button can be used to split the post content: content above the ‘More’ button will display in the widget.
  • Content Character Limit – set the number of characters to be displayed in the widget, removes HTML formatting.
  • More Text (if applicable) – set text for the ‘More’ button.
Featured Posts Widget

Here’s what each widget option does:

  • Title – the title of the widget.
  • Category – select all or one specific category.
  • Number of Posts to Show – how many posts to display.
  • Number of Posts to Offset – use this to to display distinct content in the widget when posts are displayed on the main portion of your page.
  • Order by – choose from: the Date on the post; the Title of the post in alphabetical order; Parent; the ID; posts with the highest Comment Count; and Random order.
  • Sort Order – choose either Descending (3, 2, 1) or Ascending (1, 2, 3).
  • Exclude Previously Displayed Posts – exclude posts that are displayed elsewhere on the page.
  • Show Author Gravatar – for this to display, the author must have a gravatar from http://gravatar.com associated with the email address in his profile. With this option you can set the Gravatar Size and choose if the image should be aligned to the left or right of the text.
  • Show Featured Image – this will display the first image uploaded to the post as a 150 x 150 thumbnail. For this option to work, you don’t have to actually display the image in the post or use a custom field. The image can be aligned to the left, right, or above the text.
  • Show Post Title – displays the title of the post.
  • Show Post Info – displays the post meta info: date, author, and a link for the visitor to comment.
  • Content Type – options are ‘Show Content’- displays the complete content of the post including images, the ‘More’ button can be used to split the post content: content above the ‘More’ button will display in the widget; ‘Show Excerpt’- displays the first 55 words of the post’s content stripped of all HTML tags and graphics; ‘Show Content Limit’ – displays a defined amount of characters; ‘No Content’ – hides all content and only displays Title/Byline.
  • Limit content to – use with the ‘Show Content Limit’ above to set character limit.
  • More Text (if applicable) – set text for the ‘More’ button.
  • Unordered List of Posts – display just the titles of additional posts from the category or categories chosen, automatically excludes the posts already shown above the list.
  • Title – used with the Unordered List of Post above, enter a Title that will display with the list.
  • Number of Posts to Show – used with the ‘Unordered List of Post’ above, enter the number of posts to include in the list.
  • Show Category Archive Link – if only one category is selected for the widget, use this to display a link to the archive page for that category.
  • Link Text – anchor text that will display on the page to link to the rest of the category’s content.

User Profile Widget

Here is what each option in the widget interface does:

  • Title – the title of the widget.
  • Select a User – select the user to be identified.
  • Gravatar Size – set the display size of the user’s Gravatar image.
  • Gravatar Alignment – display the Gravatar to align left or right of the text.
  • Author Description Text – display the “Author’s Bio” from the user’s Biographical Info (located in the “About Yourself” section on the user’s page in the dashboard) or display text entered in the “Custom Text” field.
  • Extended About Me Page – select a page to link at the end of the Author Description to provide more information about the Author.
  • Extended Page Link Text – the text to use to link to the Extended About Me page.
  • Show Author Archive Link – displays a link to a page that contains links to all pages associated with the Author.

Menus

In both WordPress and Genesis menus are used in the navigation bars and sidebars. Genesis uses the WordPress menu feature found via the Dashboard. Once you have published some content on your site, be that pages and/or posts, you are ready to create a menu.

Log in to WordPress and go to “Appearance” in the dashboard. From there ‘Menus’. Under the ‘Edit Menus’ tab click on the ‘Create Menu’ button.

Create Menu

Enter a name for your menu in the ‘Menu Name’ box and press enter on you keyboard. This will give you this screen.

Create Menu2

Under ‘Menu Settings’ there are two sections:

  • ‘Auto add pages’ – Checking the “Automatically add new top-level pages” box will automatically add new pages you publish to the menu. If you leave it unchecked you can add new pages to the menu manually.
  • ‘Theme locations’ – Checking the boxes here will add the menu you’ve created to either the primary navigation menu or the secondary navigation menu.

To populate your menu look to the left of the screen where you will find three tabs with drop down menus: Pages, Custom Links, Categories.

Pages: To add pages to your menu put a check mark next to the pages you want to add. Click the “Add to Menu” button.

Custom Links: To add links which are not pages or categories, add both the ‘URL’ and the ‘Link Text’ that will be used for the link. Click the ‘Add to Menu’ button. This is also the place to create non-clickable menu items, e.g. to act as a parent for various pages: just enter # for the ‘URL’ field and add your ‘Link Text’ as usual for the title. Click the ‘Add to Menu’ button. You can then clear the URL field completely.

Categories: To add a post category to your menu put a check mark next to the categories you want to add. Click the “Add to Menu” button.

Create Menu3

The items added to the menu will appear in a list. This list can be reordered by dragging the menu items around. You also can create a sub navigation menu item by moving a menu item so it is indented to the right of the parent item.

Create Menu4

Each of the menu items has a drop down menu. If you click this you will see the following options:

  • Navigation label – This is the title of the menu item. It can be different to the page title.
  • Title Attribute – This is the text which will be displayed when a user hovers over a menu item.
  • Open in a new window/tab – This will open the menu item in a new window or tab when clicked.
  • CSS Classes (optional) – This allows you to give the menu item additional CSS classes.
  • Move – Clicking this will move the menu item up or down the menu list.
  • Remove – Clicking this will remove the menu item from the list.
  • Link Relationship (XFN) – This allows you to show your relationship to other webpages. More details here.
  • Description – If your theme supports this then the description will appear in the menu.
Create Menu5

If you do not see all of the menu options listed above click the ‘Screen Options’ tab and add a check mark next to the missing items. When you are done, click the ‘Screen Options’ tab again to minimize it.

Create Menu6

Once you have finished adding items to the menu click the ‘Save Menu’ button to save it.

Additional instruction can be found in the WordPress codex here.

Editor

The Appearance Editor Screen allows you to edit your Theme/Child theme’s files.

Edit Themes

The Theme Editor allows you to view or change (see next paragraph) any code kept in a Theme Template or Stylesheet files. The particular file contents are displayed in the large text (or edit) box that dominates this Screen.

If a specific file is writable (see Changing File Permissions), changes can be made, and saved. If a file is not writable, the message ‘You need to make this file writable before you can save your changes. See the Codex for more information.’ will be displayed. Of course, you will need to change the File Permissions before changes can be saved.

The name of the Theme file being edited is displayed at the top of the text box. If the full text of the file cannot be viewed, a scroll bar to the right of the text box is provided. Since Theme files are pure text, no images or pictures can be inserted into the text box.

Select theme to edit

From this pull-down box, select the Theme that needs to be edited and click the Select button on the right. Once the Select button is clicked that Themes Template and Styles files will be listed on the right side of the text box and the Stylesheet (style.css) file for that Theme will be placed in the text box.

Theme Files

Listed to the right of the large text box is a list of the Theme Template or Stylesheet files that can be edited. Click on any of the file links to place the text of that file in the edit box.

Be very careful editing PHP files of your current theme. The editor does not make backup copies. If you introduce an error that crashes your site, you cannot use the editor to fix the problem. In such a case, use FTP to either upload a functional backup of the problem file or change the folder name of the current theme so WordPress is forced to use a different theme.

Update File

Remember to click this button to save the changes you have made to the file. After clicking this button you should see a splash message at the top of the screen saying File Editted Successfully. If you don’t see that message, then your changes are not saved! Note that if a file is not writeable the Update File button will not be available.

For more details see the WordPress Codex entry.

Back to the Top