WordPress Guide: part 5 – Design and Layout

Wednesday, February 24th, 2010 at 10:44 pm

Click here to download the complete 11-part guide in PDF format. (2.5MB)

Themes

Themes, located under the Appearance button, are a group of files and images that create the look of your website. WordPress comes with a “Classic” and “Default” theme that are rather bland. Your web designer should have provided you with a more interesting design that is unique to your company.

By clicking on a theme’s thumbnail or the “activate” link, you will change your website design. Keep in mind that the theme that was created by your web designer may require features or functions not included in other themes. This could result in errors or missing content.

Find out more here: http://codex.wordpress.org/Appearance_Themes_SubPanel

If you click the Editor link under Appearance, you’ll see on the right side of the browser the list of files that make up the theme. In the middle of the browser is the actual editing area. This should be left to someone with HTML, CSS and possibly PHP knowledge.

Find out more here: http://codex.wordpress.org/Appearance_Editor_SubPanel

Widgets & Themes

Beneath the Themes button is the Widgets button. Widgets are small programs that add additional navigation methods as well as additional functions to your website. WordPress comes with many to start off with but you or your web designer might have added more widgets.

Widgets are usually placed in the Sidebar. The Sidebar is a designated location in your theme to help keep your widgets organized. Depending on your theme, you may actually have multiple Sidebars. Most themes have either one or two Sidebars on either the left side, right side or both sides of the website. More sophisticated themes may have Sidebars at the top and bottom of the website.

Whichever way your theme is setup, this system of Widgets and Sidebars was developed to make it easier for you or the designer to move these functions around. It is also easy to activate and deactivate them.

Some examples of Widgets that come with WordPress include: Categories, Archives, Search and Pages.

You can see here on the right how the widgets display in a website’s Sidebar.

To select the widgets you want to use, simply drag them from the Available Widgets section into the Sidebar of your choice (if you have more than one).

You can drag them up and down to put them in any order you wish. You can drag them out of the Sidebar and back to the Available Widgets section to remove them from the Sidebar.

Most widgets come with options or settings. Just click the down arrow at the right end of the widget’s bar to display any options that may be available. Click the Save button to save any changes you make to the widget. Then click the arrow icon again to close the widget.

In the old days before widgets, editing any of these simple functions required editing the theme files. Using widgets makes editing more accessible to non-technical users.

Find out more here: http://codex.wordpress.org/Appearance_Widgets_SubPanel

Add New Themes

The ability to add new themes is present under the Appearance button. This feature comes with the same warnings as mentioned in earlier sections. Making changes to your website’s design may require HTML, CSS, and PHP knowledge. Also, certain features of your existing website design may not be compatible with the new theme you upload or edit.

With that being said, this section allows you to upload or search for new themes and then upload them directly to your website without the need for FTP access.

Find out more here: http://codex.wordpress.org/Appearance_Themes_SubPanel#Adding_New_Themes

Header Image and Color

This section is specific to editing the Header’s colors. This might not be editable if the theme you’re using doesn’t use the default Header code. In my case, I create my own Headers and therefore when I click on this button, I don’t see my Header. I see the default Header that came with WordPress.

Note: The Header usually consists of the graphics and possibly the links at the top of the web pages.

Find out more here: http://codex.wordpress.org/Appearance_Header_Image_and_Color_SubPanel

Part 1: Introduction
Part 2: The Dashboard
Part 3: Writing or Editing a Post
Part 4: More About Content
Part 5: Design & Layout
Part 6: Plug-ins
Part 7: Authors & Users
Part 8: Tools
Part 9: Settings
Part 10: SEO Basics
Part 11: HTML Basics

Tags:

Leave a Reply