Expressions WordPress Theme - Documentation

Thanks for downloading Expressions!

Index

Part 1

Part 2

Part 3

Part 4

Part 5


 Installation

  1. Upload Expressions to the themes directory of your wordpress setup. Ensure all sub directories are maintained.
  2. Activate the theme through the Wordpress Admin panel under "Appearance" and "Themes"

Your opening screen for a fresh install should look something like this :


Opening Screen

Things are looking a little bland :-) Lets start by adding a menu.



 Menu Set Up

As shown below :


  1. Go to the menu panel under Appearance => Menus
  2. Input your menu name, I use main menu
  3. Click the Create Menu button

Menu Panel 1

The screen will update to something like the one below:


  1. Select Primary Menu from the drop down list
  2. Click the Save button

Menu Panel 2

Your menu system is now ready to go. Simply select the pages and add them to the menu. You can drag the menu item to indent it and it will appear under the parent. To create a dummy menu item just use # in the Custom Links/URL section, give the link a title and click the Add to Menu button. Dummy menu items come in handy when you are setting up drop down menu items. In the default menus set up the Home page and the Sample Page are included in the menu. If you want to delete them just click the down arrow for each menu item and remove them.


Now that the menu is installed there are a few options. Go to Appearance => Expressions Options.


Header Options 1

Under the Header tab, you will see that there are three Menu border options and three Header menu location options. The menu can be put on the left,right or center of the Header. You can leave it with no border, a full border, or just a border that covers the menu. I decided to only allow the menu border option when the menu is centered, as it does not look great on the left or right sides. Scroll to the bottom and click the Save Settings button.


Header Options 2

For now that's enough about the menu. We'll add more items as we work through the documentation.


 Logo Set Up

The header is repeated on every page of your site. Expressions does not allow you to have different headers for each page, and it's not really recommended as users will want to be comfortable navigating around your website. There are a lot of options for the header system and I will show you in detail how to use each one.

Header Logo

Further Reference: WordPress Appearance Header Screen


You can include a website site logo in the upper left hand corner or in the center of the header. To do this go to Appearance => Header and you will see the following screen:


Custom Header 1

This theme is responsive meaning that images are automatically scalled to screen width. Your logo will be scaled as the screen size is changed. If the logo is on the left it is scaled to 28% of the screen width, if it is positioned in the center it is scaled to 50% of the screen width. The scaling occurs only if the available width is less then the original logo size. The logo is not scaled larger. Logo height is automatically set to maintain the proportion of the original logo.


Tip: Keep your logo under 200 px wide, and keep the height reasonable, so it looks good. Also I will typically create the logo as a jpeg or png image.


Once you have designed your logo cick the browse button and select your file. Then click the upload button. You will then see the next screen :


Custom Header 2

You can crop your image to the desired dimensions here. I think it's better to set up your logo to the correct size before you upload it, using an image editing program such as Gimp, or Photoshop. I created a quick image for this demo, sizing it at 200px wide by 52px high. So all I have to do is drag the selected area to capture the entire logo and click Skip cropping and Publish image as is.


If you want to remove an image from the header panel you need to delete it in the Media panel.


Finally, if you do not want a header image click the Remove Header Image Button.


We're not quite done yet as you need to tell the theme to show the logo. Go to Appearance => Expressions Options.


Header Options 3

Under the General Tab, scroll down to Header Options. Click Show LOGO. If you want the logo centered click Center LOGO otherwise leave it unchecked. Scroll to the bottom and click the Save Settings button.


Tip: If the last thing you did was click a check box on or off, yo can just hit your enter key and the settings will be saved.


The installed logo is shown below. Note that I have also selected to show the blog title and tag line (description). The "Sample Page" menu item also appears in the header.


logo loaded

 Right Header Widgetized Area

The header area has a couple of widgetized areas. The first one is called Right Header Area and it is allways available for use. The second one is called the Left Header Area and it is only available if the user chooses to not show a logo, Site Title, and Description. Lets start with Right Header Area but first I want to talk about the Social Widget.

Social Widget

As we continue to pursue the Header set up it's a good time to talk about the Social Widget. Expressions comes with a custom social widget. To set up for the widget you first need to enter the links for the social sites you are a part of. Go to Appearance => Expressions Options => Social tab. If you want to use font icons for social icons click the "Use Social font icons". Then input the links for your social sites. Remember to Save Settings.


Make sure you test your social links.


social options

Set up the Header Widget

Go to Appearance Widgets and you will see that there are quite a few widgetized areas in a column on the right. Also notice the Expressions Social Links Widget. Open up the Right Header Area and drag over the Expressions Social Links Widget:


Delete the Social Links title (If you don't want the title showing in the header), pick the size of the icons you want, select the social links you want to show and save the widget.


right header widget 1

Want to add a phone number? Drag the Text Widget and place it above the Expressions Social Links Widget. Enter the phone number and save the widget.


right header widget 2

Left Header Widgetized Area

If you want to go completely custom in the Header area you can activate the Left Header Area by simply unselecting Show LOGO, Show Blog Title, and Show Blog Description. Doing this will allow you more freedom to customize your header area. For example if you want to put in your blog title and a description on the left side, go to Appearance => Widgets and drag over a Text widget to Left Header Area.


left header widget 1

I added a different title, and description, using html, and added in-line styles for spacing. Also note the menu area now has a border.


The header now looks like this :


left header widget 2

Header Banner Image

When you enable the Left Header Widgetized Area you also can load a banner image. The banner image is loaded using the same procedure as you loaded the logo. The big difference is that now you can load a full width banner.


Tip: Keep the banner 960 px wide, and no more that 320 px high.


I created a banner for demo purposes, and the Appearance => Headerpanel is shown below :


banner 1

The new header set up is shown below:


banner 2

Index

Part 1

Part 2

Part 3

Part 4

Part 5