Tutorial Details
Subject: WordPress
Difficulty: Beginner
Published: March 17, 2014

This guide is designed to provide you with a complete insight to the appearances tab within the WordPress dashboard as well as tips on how to use those functions to full affect when managing your own site.

Unlike most tabs within the WordPress dashboard, the appearance tab is the home for several deeper segments that enable you to manage the look and feel of your website.

Those tabs include:

Themes
Every WordPress installation contains four free WordPress themes that were produced each year by the WordPress team.

Each theme can be activated from the click of a button and this will change the look and feel of your website. Each theme comes with it’s own unique options as well as locations for widgets and so forth.

Whilst four themes are uploaded to your WordPress dashboard automatically, by no means are you restricted to those few. You can find other free themes by using the search function within the Themes tab. To do this, simply select the Add New button.

[G-WP-0008] - An introduction to the appearance tab 1

You will then be presented with a theme search suite to source the theme that best meets your requirements.

As you can see below, the theme search suite offers multiple options to find the exact theme for your needs simply select the theme features you require such as the colour scheme and the number of columns the theme uses and then select search.

[G-WP-0008] - An introduction to the appearance tab 2

Once your search has been conducted you will be presented with a selection of free WordPress themes that fulfill your search criteria.

[G-WP-0008] - An introduction to the appearance tab 3

It’s likely that you will have several pages filled with theme options and whilst you can see what the theme will look like once it is fully set up, it’s challenging to know for sure as to whether a theme is the perfect fit for your requirements. In order to know which theme is best suited to your needs, we suggest that you select the details option to read through the theme options as well as any reviews posted from other users. Furthermore you should select the preview theme option to gain a further insight as to what your website is likely to look like. Please note that the preview is unlikely to portray how your website is likely to look once you have added all of your own content and set the website up properly, so expect your website to look far better than the example once you have spent some time on development.

Paid Themes

Whilst the WordPress marketplace provides you with various themes to select from, it’s more than likely as time goes on that you will want to perfect your website or you may have a particular website design in mind that’s not readily available within the WordPress theme options.

It is in this instance, when you feel limited and you have a desire to take your website to the next level that you will need to look at buying a WordPress theme for further flexibility as well as additional design features.

Purchasing a WordPress theme and uploading it to your WordPress dashboard is a straightforward process. Simply search for a WordPress theme retailer or use the ones that we would recommend below:

Ink Themes
Woo Themes
Theme Fuse
Theme Forest

As you can see, there are thousands of WordPress themes to pick from so by no means should you feel restricted in any way.

Once a theme has been purchased you can upload the theme files directly into your WordPress dashboard through the Upload option.

[G-WP-0008] - An introduction to the appearance tab 4

Once the Upload text link has been selected you will be presented by the Theme upload page, simply select the Browse option, find your theme and select Install Now.

[G-WP-0008] - An introduction to the appearance tab 5

Thereafter you will see your theme available for selection so select the ‘activate’ option to replace your current website design with the new one you have bought. It’s that simple.

Customize

The customize option enables you to edit your website on the fly, and what we mean by this is that you can use the toggles provided to edit the text and colour scheme of your website without the need for manual CSS insertion.

Whilst this method of website development is far from favourable among the more experienced web developers, it’s by far the easiest way to make website amendments and a great place to start for beginners.

[G-WP-0008] - An introduction to the appearance tab 6

As you can see from the screenshot above, there are multiple options within the customize section. Options include:

Theme Preview

[G-WP-0008] - An introduction to the appearance tab 7

Site Title & Tagline

Change the title and tagline of your website, or whether this is displayed at all.

[G-WP-0008] - An introduction to the appearance tab 8

Colours

Editing the colour scheme of your website has never been easier. Simply use the toggles to change the colour of your website background or title text.

[G-WP-0008] - An introduction to the appearance tab 9

Background Image

It’s often the case that a stand-alone background colour looks either too heavy or bland for the website. To overcome this issue you can upload a background image or a texture to your website. You may already have your own images and textures ready for upload, however if this is not the case you can purchase such elements very cost effectively online. Websites such as the ones listed below make it very simple to enhance the overall look and feel of your website:

Bigstock
Shutterstock

[G-WP-0008] - An introduction to the appearance tab 10

Please note that all photography / stock image websites set their own unique policies and guidelines as to how their content is used. We suggest that you look through such policies before you purchase or use any stock items. In most instances your use will not expand the guidelines set, however if you were to use the image on merchandise or as a website background you could infringe upon their guidelines.

Navigation

The majority of WordPress themes allow you to display 2 menus within the design. Predominantly one is always used as a top level menu area and the second could be located either underneath the main menu, in the footer of your website or within the sidebar.

[G-WP-0008] - An introduction to the appearance tab 11

Anyhow, the Navigation option within the Customize tab enables you to select which menus display where within your website.

Static Front Page

Most themes support a static front page unless they are specifically designed to be blogs. Remember that WordPress was initially designed to be a blogging platform; hence the reason as to why most WordPress themes display your latest blog posts on the home page by default.

Thankfully almost all WordPress themes come with a static front-page option. Simply select how you want your website to appear here.

Featured Content

Regardless as to whether you opt to use a blog on your home page or within a deeper page of your website, the Featured Content section enables you to select how your posts are displayed. Whether that is through a grid or slider layout or whether only posts which contain a matching tag are displayed.

[G-WP-0008] - An introduction to the appearance tab 12

Widgets

WordPress widgets are designed to make it quick and easy for every web developer from a beginner to seasoned professional to add content and other features to their WordPress theme.

All WordPress themes differ and will allocate specific areas within the site for you to insert widgets; the majority of WordPress themes allow you to add widgets to the sidebar and footer of your website. Some of the latest themes to have been released also offer additional spaces, which can include many other areas within the overall theme.

Advanced users can go to the functions.php file to see where and what order the widgets have been added to the theme.

[G-WP-0008] - An introduction to the appearance tab 13

By default every WordPress installation will come with the standard WordPress widget options, which include:

Archives

Once activated this will display a dated collection of your blog posts to make it easy for website visitors to source content within your website.

Calendar

If your website sells tickets, holidays, hotel bookings or anything else that associates a date to it, then the calendar widget could be a useful feature for website visitors.

Categories

You have the option to allocate a category to all new post types, this makes it easy for website visitors to source information based upon a relevant category selection.

Custom Menu

It’s certainly possible that there is not enough menu space for you to list all of your website pages. This is when you may want to add a sub menu to the sidebar or footer of your website.

Meta

Forums and blogs often use this widget with multiple contributors. Websites with various managers or users may also opt to add this function to their website.

Pages

Enhance navigation and improve the overall user experience of your website by adding the Pages widget to your website.

Recent Comments

Blogs or websites with lots of discussion, debate or reviews may wish to add the comments widget to display all recent comments published by their website visitors.

Recent Posts

Make it easy for website visitors to access the latest content published onto your website. The Recent Posts widget enables you to select a set number of new posts to display.

RSS

As you grow your website and blogging networks, there is the possibility that you will own more than one website / blog and wish to display your latest posts on another website, or you may know of another blog that you highly recommend and wish to make it easy for your website users to access that website. Either way, all of the above is possible through the RSS feed widget.

Search

As your website grows it can become challenging to source pages or posts quickly. Make it easy for your in-house team and most importantly your website visitors to conduct a search for the page or post they are looking for. The search widget works rather similarly to how search engines search and display content.

Tag Cloud

As you create posts, it’s likely and best practice to add tags. This will make it easy for users to find your content and search engines to index your posts. Furthermore, if you activate the Tag Cloud widget users will be able to click through a tag to a collation of related posts.

Text

The text widget is very useful and possibly the most used widget of them all. The text widget provides you with the freedom to add standard text or HTML code to display contents in the way that you wish for it to be displayed.

Further widgets can be added to your WordPress website and most plugins that you add are likely to come with a widgetized option.

Widgets can be customised further through CSS, some widgets even come with a dedicated tab within your WordPress dashboard and enable you to select further settings and make additional customisations.

Activating and deactivating a WordPress widget is simple, simply drag and drop a widget in or out of a dedicated widget zone. As you can see below, these are displayed to the right hand side of the default widget options.

[G-WP-0008] - An introduction to the appearance tab 14

Once a widget has been dropped into any of the allocated widget locations then you will soon find that contents will have been added to your website as you can see in the example below:

[G-WP-0008] - An introduction to the appearance tab 15

Menus

All WordPress themes will come with an area for a menu to be allocated and others will come with possibly two or three.

You can create and manage your menus within the menus option allocated underneath the Appearances tab.

[G-WP-0008] - An introduction to the appearance tab 16

As you can see from the screenshot supplied above, the menu management system is fairly straightforward and follows a simple drag and drop principle. This makes it easy for you to order each tab within your menu from the click of a button.

On the left hand side you will see an area containing multiple tabs labeled Pages, Links and Categories. Those tabs enable you to add menu buttons to your website.

Pages

This is a list of the pages that are created within your WordPress dashboard, to add a page to the menu simply check the box on the left hand side, then click ‘add to menu’. Once added, those menu buttons will appear in the right hand section as well as on your website.

[G-WP-0008] - An introduction to the appearance tab 17

Links

Menu labels are created using the title name of a page. If you don’t wish to use the menu label that is automatically generated and would prefer to use a more relevant or a more presentable label name, then this can be created using the links tab. Simply enter the URL or any web page you wish to link to and enter the title you wish to display. Once happy, click ‘add to menu’.

[G-WP-0008] - An introduction to the appearance tab 18

Categories

As your blog expands, further categories will be created; those will be displayed within the categories section of your menu management area.

[G-WP-0008] - An introduction to the appearance tab 19

As stated before with pages, simply check the box of the categories you wish to add and they will appear in the right hand section (as you can see below).

[G-WP-0008] - An introduction to the appearance tab 20

You will notice that some of the menu labels have been moved slightly to the right, doing this will display the pages below the tab above in the menu, causing a drop down feature.

At the bottom of the Menu Structure area you will find additional options, which include:

Auto Add Pages – Automatically add new top-level pages to this menu

Checking this option will ensure that all new pages are added to your menu automatically with no need to manually add them.

Theme Locations – Top primary menu
– Secondary menu in left sidebar

Checking either of those theme location options will ensure that this menu is displayed in that designated area of your website.

It’s likely that you will want to use a unique menu for each individual location, and if you so wish for this to happen then you will need to create an additional yet unique menu, followed by the location you want it to appear.

[G-WP-0008] - An introduction to the appearance tab 21

Custom Header

Most WordPress themes come with a header section for you to either edit text or add a header of your own.

Initially you will most probably just want to stick with header text but as your website grows it’s more than likely that you will want to create a unique header of your own.

Uploading your own header is a relatively simple process. For best results follow the dimension guidelines suggested when it comes to designing your header. Once your header is complete and ready to go onto your website, select the Browse option, find the header you wish to use and select Upload.

[G-WP-0008] - An introduction to the appearance tab 22

If you wish to stick with the standard header text, you can edit the font colour and select whether the text displays in this section.

Custom Background

Most WordPress websites come installed with a bog standard plain white background. Whilst this can look very smart and classy for corporate websites, there is every chance that you may wish to change the default background to something more relevant, whether that is a high quality image, a graphic or a texture. Regardless of what you wish to use as a website background image, you can upload a unique design through the custom background option.

Follow the instructions provided beside the select an image heading to upload your own background image. Alternatively you can select a file already uploaded to your WordPress dashboard and stored within your media library by selecting the ‘Choose Image’ button.

If you don’t own a quality background image and are struggling to source one that’s suitable you could use the Display Options feature to select a suitable background colour for your site. Whilst this feature does offer you a broad colour pallet to select from, you are limited to using solid colours which can appear heavy when a website visitor accesses your site.

The alternative option is to purchase an image / graphic / texture from a stock photography website. Universal Web Design uses such images on a regular basis for client websites and they suggest it’s the most effective way to produce a quality website. Sites they recommend include:

Bigstock
Shutterstock
iStockPhoto

Images typically only cost around £4 to £5 each, so this could be a cost effective way for you to transform the presentation of your website.

Please note that all stock photography websites set their own user policies and in some cases the artists will set their own policies as well, so ensure to read those and to keep clear of infringing their agreement.

Editor

Unless you wish to take your web development skills to another level or you already have obtained those skills, it’s unlikely that you will want to use the editor section at all. At most, you might wish to make a small alteration.

[G-WP-0008] - An introduction to the appearance tab 23

As you can see from the screenshot above, this section is intended for the advanced user and things can go wrong if you make mistakes within this zone – but remember, mistakes can be fixed, they’re just not so easy to alter.

The code in the Editor section is mostly PHP with some CSS sections. If you wish to take your skills to this level then we strongly suggest for you to watch our HTML, CSS and PHP tutorials before you make the jump.

Summary

The full intention of this guide was to provide you with an insight to the Appearance tab of the WordPress dashboard, how to make visual and content related amendments as well as reduce all fears as to what each feature does. We hope that all of those points are covered, but please do not hesitate to make any suggestions that will help us explain this section in greater detail.

Special Offer. 12 Months Membership For Just £60. Sign Up Today!Join Now