Expressions WordPress Theme - Documentation

Thanks for downloading Expressions!

Index

Part 1

Part 2

Part 3

Part 4

Part 5


 Expressions Options - General Tab

I've covered a few sections in the Expressions Options => General Tab. There are a few other sections to review.


Help Button

In the upper right hand corner of the screen you will find a Help button. When you click it you will be presented with a help screen that covers each tab of Expressions Options. Hopefully you will find some helpful information there.


help

General Options

Email address for contact page - This address will be used for your contact page. If it is left blank then the email in Settings => General is used.


Show Favicon - You will need to create a favicon.png 16px x 16px image and place it in the theme root folder. Favicons are a pain as some browsers treat ico images differently. The best success I have had is with a png image.


Include Captcha in Comments Form - Check this box to have your users enter a captcha before being allowed to submit a comment. This captcha will help prevent spam generated by bots. Note: The captcha script uses php Graphics Draw to create the image, if GD is not enabled, the captcha script will not work and you will get the alt string Verification Captcha or you may see some other weird things. It should always be a random 6 letters....no numbers. If have problems with the captcha or wish to use one of the many captcha plugins out there, then you can disable it here.


comment captcha

Include Captcha in Contact Form - Check this box to have your users enter a captcha before being allowed to submit a contact e-mail. This captcha will help prevent spam generated by bots. The user must use the contact form supplied by Expressions to use this feature. As mentioned above, ensure your captcha is working or disable it.


Use color caption option - Check this box if you would like to use a color captcha. This captcha uses images of letters and does not use the true type graphics draw function. If you are having compatibility problems and the black and white captcha is not working then try this option.


Nivo Slider Options

These options will apply to all nivo sliders.


Nivo Slider Transition Effect - Select the transition effect that you want.


Nivo Slider Pause Time - Time between slides in miliseconds.


Nivo Slider Transition Time - Time to bring up the next slide in miliseconds.


Post Options

Use font icons - This option will use font icons in the post meta, and enables list options. Try it out and see what you think, it's very cool.


Display Post Format icons - Expressions uses all post formats. Selecting this option displays a identifying Post Format icon to the left of each post.


Use Post Format font icons - Select this to use a font icon instead of an image icon.


Include author name in blog posts - Include/exclude the author listing in the post.


Include date in blog posts - Include/exclude the date listing in the post.


Include category in blog posts - Include/exclude the category listing in the post.


Include tags in blog posts - Include/exclude the tag listing in the post.


jQuery Options

Disable colorbox.js plugin - The colorbox.js jQuery plugin is used to display single images and galleries. If you are experiencing any problems with the plugin, or wish to use a different plugin, you can disable it here.


Disable fitvids.js plugin - The fitvids.js jQuery plugin is used to make embedded videos responsive. If you are experiencing any problems with the plugin, or wish to use a different plugin, you can disable it here.


Disable responsive post images - If unchecked this script looks for all images in your blog and page posts and it will make the width immediately responsive. It provides for a more responsive view on mobile devices. Check out your site on a mobile device with and without this feature and decide which is better for you. Note: This option may affect plugins that display images in self contained divs, NGGallery is one example. If you find problems then disable the script by checking the checkbox. Your site will still be responsive, but images will not adapt to the screen until they have to.


Responsive Options

Include mobile friendly design - You can disable the mobile friendly design here. You would do this if you wanted to view your website on mobile devices in full size, not the best option on smaller devices.


 Expression Options - Sidebar Tab

All sidebars are widgetized. Go to Appearance => Widgets Simply drag the widget you want to use to the sidebar of your choice.


Use full width for single posts - Click this option to display single posts without a sidebar. It comes in handy if you are using the full width blog tremplate to let you maintain that look in your single posts.


WordPress Pages - All standard WordPress page sidebars can be set on the left or right side.


Custom Pages - All custom page sidebars can be set on the left or right side in the page set up "Expression Page Options" admin panel.


 Expressions Options - Footer Tab

Show Footer Area - Include or exclude the footer area.


Select footer columns - Select 3 or 4 footer columns.


Show Copyright Strip - Include or exclude the copywright strip.


Copyright left text - Enter the text you would like to appear on the left side of the copywrite strip. This would typically be &copy; copywrite <a href='www.yoursite.url'>www.yoursite.url</a>


Copywrite middle text - Enter the text you would like to appear in the middle of the copywrite strip. This would typically be site by &nbsp; <a href='www.developer.url'>www.developer.url</a>


Copywrite right textEnter the text you would like to appear in the right side of the copywrite strip. A suggestion may be a link to a siteplan :<a href='yourlink'>siteplan</a>


 Static Home Page - Initial Set-up

There are quite a few options for setting up your home page. If all you want is to use a blog as your home page then you can skip this section, and go to the blog set-up section. The Expressions theme offers a number of different options for a static home page that you can use to dress up the most important page on your site.


To set up a static home page :


  1. Create a new page with the title "Home"
  2. Select Home Page from the drop down list under Template
  3. Click the Publish button

The New Page Panel is shown below. I also want to draw your attention to the "Expressions Page Options Panel". There are a number of custom options that are available to you but for the Static Home Page only the "Feature Category" and "Feature Type" will be used (see the Feature Setup Section Below).


Static Home Page Set Up 1

Next you need to tell WordPress to use the static home page :


  1. Go to Settings => Reading
  2. Click the static page option under Front page displays
  3. From the Front Page drop down select Home
  4. Click the Save Changes button

Static Home Page Set Up 2

You should now be able to load the site and see your home page. It should look something like the image below. Again pretty bland but all home page options are turned off by default except the feature section. Note the feature section is showing a error and a widgetized area. Don't panic we're going to set it up.

Note that I've removed the banner from the provious section and returned to a header with a logo and description. The banner style header does not really look great when you are using a feature because you want the feature to draw the visitor's attention. I've also dragged a few widgets to the footer area.


Static Home Page Set Up 3

 Static Home Page - Feature Section

When using the feature section of the home page you can choose from 9 slider options, 3 mosaic options, or 3 single image options. And of course you can also choose not to show the feature section. The feature section uses a WordPress concept of feature posts. A feature post is a post with a feature image attached. The code then pulls the feature images for a specified category and presents those images in the feature section.


Set up a Feature Category

The first thing to do is set up a feature category:


  1. Go to "Posts" => "Categories"
  2. Input the category name(Feature 1) and slug(feature1) and description if you want.
  3. Click "Add New Category" and you will see it appear on the right hand side.

Category Set Up

The category will not show up in any drop down lists until you have created a post with that category so we will do that next.


Create a Feature Post

  1. Create a new post
  2. Enter the title, content and select "Feature 1" as the category.
  3. In the lower right hand side of the panel is "Insert Featured Image". Click it and upload your featured image.

Feature Post
Insert Featured Image

  1. Fill in the information for the image. Of particular interest is the Caption and the Description which could be displayed depending on the type of Feature you select. Note that you can also leave the Caption and Description blank and they would not show up in the Feature section.
  2. Click "Set Featured Image"

You will be returned to the new post panel and the feature image will be shown. It's also worth pointing out the "Expressions Post Option" section.


Do not display this post - You have an option to excude a post. One might think, why would I do that? Well sometimes you just want to set up a feature slide without any comments. Or you may simply not want your feature posts to show up in your everyday blog. An alternative option I have also set up is to set up a tag called "exclude" and include this tag with your post. This alternative works with earlier versions of WordPress and, also allows you to track excluded posts by the "exclude" tag.


Exclude Feature Image Link - Feature images typically link to their Feature Post. If you don't want the link, click the checkbox.


Feature Image Custom Link - If you want t change the link to a custom link, uncheck the "Exclude Feature Image Link" and add your custom link.


Use Post Title instead of Image Caption - In small and full slide options, image captions are shown in a opaque black strip on the bottom of the image. If this box is checked the Post Title where the image is featured will be used instead. It may come in handy in cases where you are using the image elsewhere and want a different or no caption for the image. Note again that it only applies to the sliders with small or full images.


Publish the post by clicking the "Publish" button.


New Featured Post

Edit the Home Page to set up the feature

Now that we've created a feature category and our first post, we can edit the home page to set up the feature.



Static Home Page Set Up 4

The updated home page is seen below.


Static Home Page Set Up 5

Notice that the right side has been widgetized. I threw in a text box and the social link widget to give you an idea on what you can put there. I've also added some feature images to the slide show.


Tip: When I upload any images I typically process them to 1024 px wide using Picassa, That way the file is big enough for any size required in the theme, and small enough to keep download size reasonable. Another thing is to keep the quality around 80% as this compression will also help keep image sizes reasonable yet keep quality at a higher level. One more thing, when showing more then 1 feature image, keep all the uploaded images the same size.


Static Home Page Set Up 6

You can edit the Home Page and pick a different option for the feature at any time.


Small Slides Button Navigation - Maximum slide width is 40% of screen width or 384 px. The right area is widgetized allowing you to add html text and other widgets.


Full Slides Button Navigation - Full width (92% or approximately 880 px wide.


Center Slides Button Navigation - Max width is 40% or 384 px. With this presentation the widetized area on the right hand side is maintained, and a left side area is use to display image caption and description. This gives you the opportunity to add commentary to your feature slides. Simply ensure your image captions and descriptions are filled out.


Small, Full, and Center Slides Thumbnail Navigation - Navigation buttons are changed out to thumbnail images. The images are sized in each case to allow 9 thumbnails across the section. Any additional slides will be wrapped to the next line. I did look at scrolling navigation but was not comfortable with the solutons for the Nivo Slider.


Small, Full, and Center Slides No Navigation - Navigation buttons are removed. Navigation arrow will still appear when you hover over the slids.


Small, Full, and Center Single Image Features - These options were created because the Nivo Sliders show a single navigation button in single image cases. Captions are not shown in the Small and Full image options.


4,6, and 9 image mosaics - These options are static images you can link to. In each case if you have more feature image posts than required, then the most recent posts are used. So controlling the order of presentation is by posting in the order that you require. Each of the mosaic options is shown below with the pictures numbered starting with the most recent as number 1. So in the 9 image mosaic, the largest image is from the 3rd most recent post.


Static Home Page Set Up 7

Static Home Page Set Up 8

Static Home Page Set Up 9

 Static Home Page - Sections

There are 8 Home Page Layout Options that can be used in the Static Home Page. In each area you can select any of 8 sections to display. Go to "Expression Options" => "Home Page" tab. The first part lets you select which section to put in each area. Then make sure the section you are using is populated with the information you want to display.


Home Page Layout Options

Note: Click the "Save Settings" button often to save your work.


Section 1 - This section allows HTML text on the left and an optional link button on the right.


Static Home Page Section 1

Section 2 - This section contains 3 service boxes. In each box you can upload an image, add a title (no html) and text (html allowed). You can also add a link button which is great if you want to link to a full page about the service you are introducing.


Image uploads can be done using the media uploader. Make sure you insert the image after the upload as it adds the link to the cell.


Tips: Keep image width less than 200 px. Jpeg images are bordered, png images are not bordered. Also keep the images the same size (if you are using them), and try to set the text length the same so the buttons line up. Check the responsiveness of your set up by changing the window size. A fair bit of fiddling around is required, but it is worth it.


Static Home Page Section 2 Static Home Page Section 2a Static Home Page Section 2b

Section 3 - This section is the same set up as Section 1. I have not included a button this time. To give you an idea of the flexibility of these sections, I have also loaded an image using HTML. Upload your image using your media loader. While in the media loader copy the file url for the image. You can then link to the image as I have done with the image url.


Static Home Page Section 3

Section 4 - This section contains 2 service boxes. In each box you can upload an image, add a title (no html) and text (html allowed). You can also add a link button which is great if you want to link to a full page about the service you are introducing. The layout is a little different then Section 2, with the image being placed on the left and the text on the right.


Static Home Page Section 4

Section 5 - This section is the same set up as Section 1.


Static Home Page Section 5

Section 6 - This section is the same set up as Section 4. In service box 7 I've ignored the image loaded and set up an image that I uploaded using media loader. This allows me to set uo the image in the middle of the section at the top. I've done this intentionally to show you the flexibility of the set up.


Static Home Page Section 6

Section 7 - This section is the same set up as Section 1.


Static Home Page Section 7

Section 8 - This section contains 4 service boxes. In each box you can upload an image, add a title (no html) and text (html allowed). You can also add a link button which is great if you want to link to a full page about the service you are introducing.


Image uploads can be done using the media uploader. Make sure you insert the image after the upload as it adds the link to the cell.


Tips: Keep image width less than 150 px. Jpeg images are bordered, png images are not bordered. Also keep the images the same size (if you are using them), and try to set the text length the same so the buttons line up. Check the responsiveness of your set up by changing the window size. A fair bit of fiddling around is required, but it is worth it.


Static Home Page Section 8 Static Home Page Section 8a Static Home Page Section 8b Static Home Page Section 8c

Your Static Home Page should now be set up and looking great. Tip: Remember you don't have to include every section, so you can set up your site the way you want. I have included three screen shots of the home page for you to take a look at.


Static Home Page Example a Static Home Page Example b Static Home Page Example c

Index

Part 1

Part 2

Part 3

Part 4

Part 5