WordPress Theme Documentation

On this page I will make a tutorial on how to set up my templates. Probably the advanced WordPress users will have this step-by-step guide, but hopefully it will be useful for everyone. I consider you already have your wordpress system installed to your server or localhost.

Step 1 – Install the WordPress Theme

Choose the wordpress theme you like and download the archive file to your computer. You have two options to install the theme:

1. Upload the .zip file via your admin panel: Appearance > Add New > Upload

add-new-theme

upload-wp-theme

2. Unzip the downloaded file, and upload it to your wordpress installation on your server via FTP to wp_installation_folder/wp-content/themes/ folder.

After installing/uploading the theme, now go to Appearance menu and activate it!

After activation a new menu item will appear, where you can set up the custom features of the theme:
theme options menu

Step 2 – Custom theme options

1. You can upload your own custom logo image or if you prefer text instead image you can edit that in the Logo tab. Here you can add also a slogan/site description that will appear under the logo:

custom logo and site description

2. In the Slideshow tab you can enable and choose the animation type for the slideshow. Here you can add slideshow images, caption text or links to each slide:

flexslider wordpress setup

At this moment the theme allows you to upload 10 different pictures and have 10 different slideshow. From my experience I noticed that most of the users will use about 3-5 slides, so I guess 10 will be just enough. You will also notice that this slideshow is separated from the content, so unfortunately you can not display posts or pages in the slideshow; you will have to create each slide separately. Also not, that the slideshow will be active only on homepage.

3. In the Social icons tab I have integrated the top 20 social profiles. Add your social profile URL in the appropriate fields to activate the icons on your blog.

Don’t forget to hit the Save Options button!

Step 3 – Setup layout and widgets

In my themes you will find at least 4 different widget ares. This gives you lots of possibilities when creating a new website that needs a certain layout.

Sidebar widget area will display widget beside the content.

Header Banner widget area is perfect to banners or contact information, this will display the widget in the header beside the logo

Top widget area is the place where you can set up multiple widgets above the content but only on hompeage. The theme will automatically detect how many widgets you have and will make the collapse, so all your widgets will show up in a line.

Bottom widget area will show widgets on all pages in the footer area, bellow content. This widget area works as the above mentioned Top widget, will detect the number of widgets and will collapse them.

Here is a screenshot with the active widgets I have in the live demo:

widget areas

Step 4 – Custom colored widgets

Probably you noticed in the live demo, that some of the widget have different colors. In each theme I have added 3 new different widget styles that fits the design and color scheme. You can add more or edit the current styles in the styles.css file:

custom colored widgets

Beside the CSS styles you will have to install the following plugin. This will allow you to add custom classes to different widgets:

http://wordpress.org/plugins/widget-css-classes/

After installing and activating this plugin, go to Widgets menu and add the custom class just like in the following image:

custom css class widget

Step 5 – Setup Menus

The current layout support two menus: Main menu that is placed above convent and Footer menu that is located under the content. To set up the menus go to Appearance > Menus

1. Create two different menus, give them a name, ie. Main Menu and Footer Menu

2. Select the menu you want to work with, allocate the pages/posts to that menu

3. Associate the menu with the location where you want to have it shown.

The Main menu is responsive, support multiple levels and have a nice animated drop-down effect for sub menus.

custom menu setup

Basically this is all, however if you have any questions regarding the theme setup please post a comment below!

Special thanks to:

Options Framework Theme: https://github.com/devinsays/options-framework-theme

FlexSlider 2 Slideshow: http://www.woothemes.com/flexslider/

0 Comments

Leave A Reply