Live Theme Instructions

Here are the complete instructions on using The Live Theme from Organized Themes.

Video Tour

Installation:
You can download the current version of The Live Theme from the support page at Organized Themes. Once you’ve downloaded the theme, go to the appearance menu in your WordPress dashboard and select themes. From there choose “add new” and upload the live.zip file you downloaded previously. Once the upload has completed, activate the theme.

Theme Options:
To configure the main theme options go to the appearance menu and select “Theme Options.” The first block will point you in the right direction if you need help. The WordPress Codex has quite a bit of help for general WordPress questions and documentation. If you have a question not answered by these instructions, please visit my support page to ask.

Styles:
The next block allows you to choose a background style. I’ve included five styles to choose from. Just select one from the drop down menu, save your changes and the new style will be active.

Identity and Navigation:
You may use the site’s title for your “logo” or if you have an image logo you’d like to use, you can use that as well. To use an image logo, go to the Media menu and select add new. Upload your logo and once it is finished, copy the URL that WordPress gives you. Now come back to the theme options page and paste that URL into the box for your logo. Save your changes and your logo will be live on the site. For best results, size your logo so that it is approximately 300 pixels wide and 70 high. I also recommend using a transparent PNG or GIF image to allow the background to be visible through the logo.
You can also add a favicon, the small icon that sits to the left of the URL in a browser’s navigation bar. Use the same upload method described above for the logo and paste the URL for your favicon into the blank. The last branding option is to include a link to your Twitter account in the header. Just enter your Twitter account URL into the box to have it appear automatically.

Call To Action Button:
The next block is for the “call to action button.” This is an optional block below the front page slideshow where you can insert a prominent link for your visitors. To use it, just select “yes” from the drop-down menu and then enter text for the button. Also make sure to enter a URL so the button links to the page you’d like it to.

Google Analytics:
The Live Theme comes with an option to add Google Analytics to your site without using a plugin. To use Analytics or any other statistic software, just choose yes from the drop-down menu and then paste your analytics code into the box. Save your changes and your site will now be tracked by Google.

Custom Styles:
The right hand side of the theme options page deals with custom styling. If you’d like to select your own colors for links, navigation and so on, just select “yes” from the drop-down menu and then enter the hex code of the color you’d like to use for that item. You can learn more about hex codes here. It is important to include the # as part of your color code (take #000000 for black as an example).
If you would like to include any custom CSS, you can also add that to the box at the bottom. You can use this to override any of the styles in the theme, or any styles that come with the plugins you use.

Slideshow:
The home page of The Live Theme features a new slideshow that is quite simple to use. First you will need to upload an image. It must be at least 870 pixels wide by 430 pixels high. Although the uploader will resize your images, it is generally best if you can resize them before uploading and also reduce their file size as much as possible while still preserving the necessary quality. Once you’ve uploaded your image, you’ll be given an option to add a link to the image to any URL you choose. You can also add a caption. Both links and captions are optional. You can have as many images as you’d like, but I would recommend having fewer that five or six to keep your page loading time down. You can also choose a different transition effect as well as the delay between transitions in the settings area.

Background Editor:
The Live Theme takes advantage of the background editor that is now part of WordPress. To change out the background image and/or color, just go to the appearance menu and select background. You will be presented with an option to upload an image to use as well as set how it repeats and what color will be used as well. Once you’ve made your changes, save them and your theme will have a new background. Please note, this is available if you are using WordPress 3.0 or higher.

Widgets:
To use widgets with the theme, go to the appearance menu and select “widgets.” You will now be presented with widgets that are included with WordPress as well as the ones from The Live Theme. To add a widget to a widget area, just drag the widget and drop it on the area you’d like to use it in. Most widgets have some options. Here’s a quick run down on the ones that come with The Live Theme:

Featured Post:
This widget will show the most recent post(s) from the category of your choosing. Just drag it to the widget area of your choice. Next select the category you’d like to display there and the number of posts you’d like to use. For the home page, please select only one post. Save your changes and you’re done. This widget takes advantage of the “featured thumbnail” option of WordPress. When you are creating a post, on the right hand side below the publish and category areas, there is a spot for “featured thumbnail.” If you select it, you can add an image that will be displayed when the post is featured with the widget.

Flickr:
This is a simple widget that displays images from a Flickr Photostream. To use it, just enter your Flickr user number (it will look something like this –28060528@N05) and choose the number of images you’d like to display. That’s it.

Twitter:
The Twitter widget displays your most recent tweets. Just enter your Twitter name as well as the number of tweets you’d like displayed and that’s it. You can also include a follow button if you’d like to. Please note, your Twitter account must be public in order to use it with this widget.

Recent Comments:
The Recent Comments widget is an improvement over the stock widget. It will allow you to display a short quote of the most recent comments as well as choose the number of comments to display.

Menus:
The Live Theme also takes advantage of the new menu creator that comes with WordPress 3.0 and higher. To use it, go to the appearance menu and select “menus.” You can create multiple menus, but note that the first one you create will be the one used in the site’s main navigation. After creating a new menu, you are presented with several options to add pages, categories and even external links all to your site’s navigation. Once you’re finished, save your changes and your new menu will be in the main navigation. If you are using a version of WordPress below 3.0, the menu on your site will follow the default arranging of pages.

Page Templates:
There are three page templates included with The Live Theme. The default has a main content area on the left and a sidebar on the right. If no template is chosen, this is the one that will be used. The other two templates can be accessed by choosing a new template on the page write screen. There is a drop-down menu below options to publish and update pages where you can select a template. The Full Width page has a large main content area and no sidebar. The site map page includes a way for your visitors to easily see the content in your site at a glance. There is also a search template that is included as well as a 404 page that includes the site map and a search box to help people find what they were looking for.

Improved Gallery:
To use the improved gallery that comes with the theme, create a page or post and upload the images you’d like to use. Once the images are uploaded, click to save your changes. Now you will be presented with an option to insert a gallery. Click insert and you will now have a XHTML valid gallery enhanced with the Fancy Box javascript light box for some flair.

That pretty well wraps up The Live Theme. If you have any questions, please visit the support page. Thanks again for your business.

Live Theme

I’m excited to introduce The Live Theme to my customers at Organized Themes. I’ve designed Live to be a versatile theme that can be used in many different situations across a wide range of sites. It can meet the needs of business and organizations as well as photographers and other artists.

Key Features

  • Created for WordPress 3.0 and up
  • Custom menus, backgrounds and styles
  • Complete theme options page
  • Front page slideshow with custom effects
  • Optional captions for slideshow
  • Custom Widgets: Featured Post, Flickr, Twitter, and Improved Recent Comments
  • Three widget areas on homepage
  • Customizeable “Call to Action Bar” on homepage
  • SEO optimized code
  • Cross browser tested
  • Javascript powered drop down menus
  • Built in social media share buttons for posts (no plugins required)
  • Complete instructions
  • Built in styling for Gravity Forms
  • Gravity Forms widget support
  • Built in page navigation and styling
  • Theme updates without requiring a subscription
  • Fancy Box gallery with valid XHTML code (replaces default WordPress gallery feature
  • Useful pages included–default page, full-width page, archive page, site map, plus search and 404 templates to help your visitors
  • Built in support for Google analytics or other tracking tools
  • Twitter link icon included in navigation
  • Fully integrated blog
  • Threaded comments with custom comment layout
  • Valid XHTML and CSS3 code
  • Amazing support from the theme author

The Live Theme is an easy to use theme that is versatile enough to use for a business, church, organization, or portfolio. Go on and purchase it today!

Down Under Instructions

Using Down Under

Once you’ve activated the theme, a new menu will appear under appearance called “Theme Options.” This is where you can configure the site’s main features. The first box contains links to guide you in finding help using the theme and also with WordPress in general. The second box allows you to choose one of the five included design styles that come with the theme. Just select one from the drop down menu and click “save settings” and your new style will be active.

The third box controls your branding for the site. You can choose to have the site’s title appear for the logo by choosing “dynamic text” from the drop down, or you can use an image logo. To use an image, go to media then add new and upload your logo. Once you’ve uploaded the image, copy the URL that appears in the resulting dialogue box and paste it into the box for logo URL on the theme options page. Save your changes and now you’ll have your own logo on the site. The same method can be used to add a favicon (the small icon that appears next to the web address in most browsers). You can make a favicon by visiting favicon.cc.

The top box on the right hand column contains the controls for using Type Kit if you so choose. Type Kit is a service that allows you to use a variety of fonts on your website with a minimal amount of fuss. If you’ve ever worked with web typography you’ll understand how amazing that is. They offer accounts ranging from free to $25 per year for one website. To use Type Kit you’ll need to visit typekit.com and sign up for an account. Then you’ll need to login and click the “browse fonts” button to start selecting.

I’ve set things up so you can easily add a heading font and a paragraph font. The free account allows you to use 2 fonts. Once you’ve found one you like, click “add” and this will launch the “kit editor” where you can further customize your selection. Once you have your fonts selected, click the “publish” in the bottom right hand corner of the kit editor to save your changes. Now you will need to click on the link for “embed code” in the top right of the kit editor. This will give you a bit of code to copy and paste into the theme options page. Select the embed code and copy it. Now go to the Theme Options page in your WordPress control panel and past the embed code into the blank for it.

The next step is to select the font you’d like to use for your headings and click on “advanced” near the top of the left hand column. From there copy the “font-family” values at the top which will look something like this:

“daniel-1″,”daniel-2″

and paste those individually into the boxes for your heading fonts. Repeat the process for your paragraph fonts. Lastly select “include typekit” and save your settings and you will have type kit live on your site. If you’ve elected to use a free account, a small badge will appear in the bottom right hand corner of your site.

The last theme option is to include tracking from Google Analytics or another statistics system here. Just paste the embed code from your statistics provider into the box and select yes to allow your site to be tracked by the service.

Widgets and Sidebars:

There are three sidebar areas included with the theme, one for posts, one for pages and one primarily for an add in the main post listing. To add a widget, just select the one you’d like to use and drag it to the sidebar of your choice. Some have options that you can then configure based on the sidebar. You can also add hundreds of other widgets from the plugins directory at wordpress.org.

The sidebar for pages will appear on every page in the site. The sidebar for posts will appear on any post, unless you are using the portfolio post template (more about that in just a minute). The List Ad sidebar is for placing a horizontally oriented ad just after the first post on any post list. You can see an example of this in the theme demo. The easiest way to add the image for the ad is to go to the Media menu and then click “add new” and upload our image. Once the upload is complete, copy the URL that you are given and come back to the widgets screen. Now drag a text widget to the List Ad sidebar. The text widget can contain html code as well as text. We are going to use the code to display the ad. Into the box type this code:

<a href="add-link-url">

You will need to replace the add-link-url with the link you’d like the add to go to and replace the image-url with the url to your image that you copied when you uploaded it a minute ago. It is important that you leave the quotes in the code above, otherwise it will not work. Now you have an inline ad appearing after the first post.

Thumbnails and Templates:

I’ve included the ability to have horizontal thumbnails with each post. To include a thumbnail with a post, upload your thumbnail image and copy the URL. Now right below the box where you write the post’s copy, you will see a box called “media details.” The first blank in this box is for your thumbnail. Paste the URL to your image and after you publish the post it will appear in your post list. It will automatically resize the image, but it will not scale the image up for you. It will only size it down. Also I would recommend agains using too large of an image as your server may not have enough memory allocated to handle the resizing.

There are also five spaces available if you’d like to host portfolio images on a post. Just follow the procedure above for as many of the portfolio spots as you’d like. It is not required that you have five, but you can have that many. In addition to adding these image URL’s you will also need to select “Portfolio Post” from the next box down that says “Single Post Template.” Now when you publish this post it will have the portfolio layout seen in the theme demo.

The last option is for page templates. There are two templates included for use on pages: Default and Archive. The default is a two column layout with a sidebar on the left. The archive page layout produces a simple list of posts by date. This is a good way to allow people to navigate your site and provides another option for people trying to find your content. It’s use is completely optional.

That covers the features of the Down Under theme for WordPress. If you need any help, please visit the support form here. Thank you again for your business.

Visual Theme

Visual Theme is my best selling theme and for good reason. It packs incredible style and features into an easy to use WordPress theme. Not only is this theme easy to use, but it is very versatile as well. It has been used successfully by churches, photographers, wedding planners, musicians and others. Anyone who wants to communicate using striking large imagery will find Visual to their liking.

The site includes all the great features you see listed on your left, but it’s even more than that. Try out the demo and see for yourself. After that, go on and purchase it today.

Key Features

  • Built in image rotator with with uploader.
  • Eight styles that can be selected from the theme control panel without editing any code.
  • A light and dark shade option to use with any style
  • Five page templates for you to use in your site.
  • Special Picture Style page that features a Flash like semi-transparent panel over a large striking image.
  • A blog page where you can serve up your favorite blog entries from any category you choose.
  • A theme control panel where you can adjust theme settings.
  • A custom background editor so you can use a background image of your choice without touching the code.
  • Home page features a sidebar and footer than can be turned on and off from inside the control panel.
  • Drop down menu powered by javascript for style and functionality.
  • Custom Flickr and Twitter widgets
  • Author box at the bottom of posts to let people know about you as well as connect through social media
  • Fancy box gallery replacement for built in WordPress gallery. Valid XHTML and great effect.
  • Theme compatible with Internet Explorer 6+, Firefox 2+, Safari 3+, Chrome 2+ and Opera 9+.
  • Complete instructions and support included.

Using Sliding Doors With WordPress Navigation

Here is a version of the sliding doors technique that doesn’t require php expressions. Just use this code in place of your theme’s current page menu.

<ul class="navigation">
        <li class="">Home

        <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&link_before=&link_after='); ?>
</ul>

All this does is give you the spans of “nav-left” and “nav-right” for you to use with your starting and ending images and code. The code above gives us the framework for the effect, but you’ll need to style it to fit your theme. Here is some CSS to get you started. This version of the technique uses a left, middle and right image with the middle image set to repeat.

#navigation a, #navigation a:visited {
    display:block;
}

.current_page_item {
        background-image: url(images/navigation-repeat.png);
        position: relative;
}

#navigation a:hover {
        background-image: url(images/navigation-repeat.png);
        position: relative;
}

.current_page_item .nav-right {
        position: absolute;
        display: block;
        right: 0;
        background: url(images/navigation-hover-right.png) right;
}

.current_page_item .nav-left {
        position: absolute;
        display: block;
        left: 0;
        background-image: url(images/navigation-hover-left.png);
}

#navigation a:hover .nav-right {
        position: absolute;
        display: block;
        right: 0;
        background: url(images/navigation-hover-right.png) right;
}

#navigation a:hover .nav-left {
        position: absolute;
        display: block;
        left: 0;
        background-image: url(images/navigation-hover-left.png);
}

That’s it. You’ll want to use your own images and tweak the css to fit your theme, but now you can have some great navigation effects that will work in all browsers. I recently used this technique on a redesign of a2 Church that we have been developing. I could have created individual buttons, but this is so much more flexible, plus if we ever want to make a change, it will be a piece of cake.