[STEP BY STEP CONFIGURE GUIDE]

Transcription

1 Life Style Word press Theme [STEP BY STEP CONFIGURE GUIDE] Various Featured are added into LifeStyle 1.0 Theme Pack! You will find the following features in this free wp theme.

2 Contents Introduction... 4 Root Folder... 4 Theme Css... 4 Theme Images... 4 Theme Framework... 4 JS Libraries... 4 Theme Features... 5 Color Schemes... 5 Editor s Pick... 5 Featured Post... 6 Comments Style... 7 Login and Registration Panel... 7 Other Features:... 8 Bevel Effect on Post Thumbs... 9 Theme Setup Basic Installation Theme admin options Styles Category Style Log Settings Front Page Featured Categories Custom Limit Subscribes Setting up Required Plugins Setting up Contact Page Create Contact Page: Setting up Page Navigation Structure Explanation CSS structure explained How to change logo image? How can I have category instead of Pages in the top menu? Sidebars... 20

3 How to change sidebar position Change Layout for Single Post Setting up a Post as a Featured or Editor Choice and Image... 21

4 Introduction The Theme Package Includes: When you receive and unzip the LifeStyle 1.0 Theme Package, you will find the following in this folder. LifeStyle: this folder contains the actual theme. Place this folder in your WordPress installation's wp-content/themes folder. Theme documentation Guide.pdf You are reading this : ) Root Folder When you open the theme folder, it is called root folder. In this folder, you will several files in here. They are the basic files required for the theme. For example, it has PHP files such as header, footer, page, single, search, style.css etc. Also this folder contains page template variations. This root folder has several other folders as well that are explained below. Theme Css The main style sheet for the theme is located in root/ folder but, we have divided the css styles in several other css according to their use. Theme Images Contains all the images that are used in the theme Theme Framework The files in this folder are some plugins, and files that are commonly used in the theme such as breadcrumb, ads etc. JS Libraries Contains javascript used for different purpose in the theme. If you use additional javascripts, you should place them in this folder

5 Theme Features Various Featured are added into LifeStyle 1.0 Theme Package. You will find the following features in this theme. Color Schemes LifeStyle 1.0 is available in 9 different Color Scheme. You are able to choose any Color Scheme for the default blog layout. You can also change the Color Scheme for Individual Categories. Editor s Pick LifeStyle 1.0 has a built in feature to set a post as Editor Pick. You can see the 3 Editor s Choice Posts on the Top Right Area of front page and 10 posts on the right sidebar of other pages.

6 Featured Post Lifestyles 1.0 also have a built in feature to set a post as Featured. You can see the 5 Featured Posts on the Top Left Area of front page and 10 posts on the right sidebar for other pages as AJAX.

7 Comments Style Login and Registration Panel For Login and Registration, there is no special template required. We have introduced a custom login area for the WordPress Users. You can see this custom login box on the top of the page saying Welcome Guest!, Login or Register. When you click on Login or Register Link a Dropdown Menu will be open. Here you can register for a new user or able to logged in with your existing login information.

8 Other Features: Here is a list for other features that in included in LifeStyle Theme Package. Custom Post Information Pallet Search Box

9 Bevel Effect on Post Thumbs Bevel Effect appears when someone move the mouse over the post thumbnail. For example if we move our cursor toward post thumbnail it will appears as overlay on the post area. See the image listed below:

10 Theme Setup This section explains the complete theme setup instead of just theme activating. We will see two steps in this section: 1. Basic theme installation and activation 2. Setting Theme Admin Options Now let's take a look at all of these in detail. Basic Installation After downloading the package, you will have LifeStyle 1.0 folder inside the theme package. Upload this folder to your themes /wp-content/themes/ folder Log into WordPress Administration and click on "Appearance" tabs listed in left menu Active LifeStyle 1.0 themes by click on activate this theme link. Theme is now active. That's it! Theme admin options Tip: Unlike many other premium themes on the net, we have kept a very few options in Theme Admin Options because the less admin option we have, the faster the theme will be. Also it becomes very easy while making changes to the theme. After theme activation, Go to WordPress Administration Panel then Appearance and select LifeStyle Options link. Your current theme options page should look something like this. Here you can choose all the different theme settings for your website. Again if you are unsure about anything here please contact us via contactus.html In this area you can configure the following things Styles Category Style Logo Settings Front Page Featured Categories Custom Limit Subscribe

11 Styles As mention above LifeStyle theme have 9 different CSS layout. By default this theme comes with Purple Color Scheme. You can change your default layout with the above mentioned schemes. Such as red, purple etc. Read the following steps to change the default color scheme. 1. For example you want to choose Red Color Scheme. Then choose the Red option from Select CSS dropdown. 2. Press Save Changes Button. It s done. If you want to create your own color scheme, then read the following steps to change the default color scheme. 1. Check the Use Other CSS? Checkbox. 2. Enter the Hex value for Post Link Color, Heading Color, Text Color and Link Color. 3. Press Save Changes Button. It s done. Category Style You can do the same thing for individual categories which you have done in Style Option. For example my blog have a category Fashion and you want to change the category color scheme to Pink Scheme than Read the following steps to change the default color scheme. 1. In Category Style you will see all Parent categories of this blog. 2. Select the Color Scheme from dropdown beside each Category. 3. Press Save Changes Button. It s done.

12 Log Settings The shortest and easiest way to change logo is to replace the existing logo file from images/ folder. In this theme, we allow you to upload your own logo without logging to your FTP or cpanel Server or you can also use the Text Logo instead of Image Logo. Read the following steps to do this. 1. Go to LifeStyle Options located under Appearance Tab.

13 2. In this blog option Click on Logo Setting. 3. If you want to show you blog name in the Text format then change the Show Blog name in Text? Option to Yes 4. If you want to show you blog name in the image format then select the Use custom logo? Checkbox and upload your PNG image file having 277px x 92px dimension in size from Upload logo Image. 5. After these step hit the Save Setting Button. Enjoy the headers with your own logo now. Front Page In this option you can show and hide the left panel on the home page. Read the following steps to do this 1. Select Yes from Show Featured Categories dropdown. 2. Select Categories from where you want to show the posts for this left panel by hold CTRL or SHIFT Key. 3. Enter the Post Limit as 1 or how much you want to display. 4. Save these settings by pressing Save Settings Button. It s done. Featured Categories In this option you can set the featured categories for the top navigation of your blog. Read the following steps to do this 1. Select Categories by hold CTRL or SHIFT Key. 2. Save these settings by pressing Save Settings Button. It s done. 3. After this go to your blog home page and see the featured categories under the logo and advertisement.

14 Custom Limit If you were using default index page as blog, we could have changed it the normal way from Settings > Reading page. This is the revolutionary functionality that no other themes on the net offer other than LifeStyle. With this functionality, you can change the limit for each separate blog pages individually directly from the LifeStyle Options. Simply go to LifeStyle Options and Open the Custom Limit Tab. Enter the limit of each individual page and Press Save Settings Button.

15 Subscribes In this option you are able to add you feedburner, RSS Url, Technorati and Twitter User ID s. What is my Feed Burner ID? 1. Go to the feedburner homepage and click sign in. You can get it from 2. Click on the feed you want to find the ID for. 3. Once you've clicked the feed you're interested in, click on feed icon. It should have a URL in it like this one: 4. ID for that particular feed. In above case, the ID is "templatescraze". 5. For this make sure Subscriptions and FeedCount Service are active

16 What is my Feed Burner ID? 1. Go to the Twitter homepage and click sign in. You can get it from 2. Once you've logged in, look at you address bar. It should have a URL in it like this one: 3. ID for that particular feed. In above case, the ID is "templatescraze".

17 Setting up Required Plugins LifeStyle theme required some extra Plugins to work efficient. Here are some Plugins that is required to use. Setting up Contact Page For contact page, there is no special template required. Instead, you can use a plugin which is easy, efficient and more powerful. Read the following steps to create your own Contact Form. 1. Download Contact Form 7 from WordPess plugins directory ( ) 2. Upload it to your plugin directory (wp-content/plugins). 3. Go to WordPress administration and activate it. Once activated, please go to Contact Form > Edit to open it Options page and set the options like where you would like to receive the etc. Create Contact Page: 1. Create a page from in your Admin Panel Pages > Add New. 2. In your visual editor, simply write [contact-form 1 "Contact form 1"] 3. Publish the page. Your contact form will automatically appear in this page. Setting up Page Navigation For Page navigation, there is also no special template required. You can use a plugin which is easy, efficient and more powerful. Read the following steps to create your own Page Navigation. 1. Download WP PageNavi from WordPress plugins directory ( ) 2. Upload it to your plugin directory (wp-content/plugins).

18 3. Go to WordPress administration and activate it. Once activated, please go to Settings > WP-PageNavi to open it Options page and set the options.

19 Structure Explanation If you view source of online demo page of the LifeStyle theme, a class is given to every element to style it. Locate that.class in the layout.css and make the changes accordingly. Tip: If you are using firefox browser, I would recommend to installing FireBug ( ) plugin that would help you find out the code for everything instantly on mouse over. Let's now go into detail on how to modify the things in the theme to suit your requirement. CSS structure explained The LifeStyle theme has been coded as per W3C guidelines. No tables has been used and the Appearance of the pages are controlled via easy to use Stylesheets. Let's take a look at all the css in detail. In the theme root folder, you will find Style.css : The basic elements and main structure of the WordPress Default classes is controlled by this file. We consider this as the main Stylesheet in the theme and all the other styles are called from this css only. Rest of the css has been placed in the same folder with the layout- prefix. This folder contains the following css files: layout-black-grey.css: You will find black and gray theme combination in this file for header, footer, search, and login areas. layout-blue.css: You will find black and gray theme combination in this file for header, footer, search, and login areas. layout-green.css: You will find green theme combination in this file for header, footer, search, and login areas. layout-grey.css: You will find black and gray theme combination in this file for header, footer, search, and login areas. layout-light-blue.css: You will find black and gray theme combination in this file for header, footer, search, and login areas. layout-light-grey.css: You will find black and gray theme combination in this file for header, footer, search, and login areas. layout-purple.css: You will find black and gray theme combination in this file for header, footer, search, and login areas. layout-red.css: You will find black and gray theme combination in this file for header, footer, search, and login areas. How to change logo image? The shortest and easiest way to change logo is to replace the existing logo file from images/ folder. In this theme, we allow you to upload your own logo without logging to your FTP or cpanel Server or you can also use the Text Logo instead of Image Logo. Read the following steps to do this. 6. Go to LifeStyle Options located under Appearance Tab. 7. In this blog option Click on Logo Setting. 8. If you want to show you blog name in the Text format then change the Show Blog name in Text? Option to Yes

20 9. If you want to show you blog name in the image format then select the Use custom logo? Checkbox and upload your PNG image file having 277px x 92px dimension in size from Upload logo Image. 10. After these step hit the Save Setting Button. Enjoy the headers with your own logo now. How can I have category instead of Pages in the top menu? In the top navigation, if you wish to display your categories instead of pages, follow these steps. 1. Open the header file which you are using. 2. Locate the <?php wp_list_pages('title_li=');?> code line at Line No 97 and replace it with the following line 3. <?php wp_list_categories('title_li=');?> Save the file. It's done. Sidebars A sidebar template has been placed in the main theme folder. On this sidebar 3 Widget areas are defined. Each widget has separate class The following widget areas are defined in the sidebar: 1. South: subscribe box is already added into this widget. You can use any widget of WordPress in this area. 2. East: about me, latest post, contact form or any widget you can use here. 3. West: subscribe box, tabbed box or any widget you can use here How to change sidebar position? By default, the sidebar in the pages and blog has been set to right, which is a best position according to usability. However, if you wish to move the sidebar to left and content part on the right, it s very easy to do so. Use the following step to do so: 1. Open index.php file into your favorite editor. 2. Locate the <?php get_sidebar();?> code at Line No 126, cut it and paste it at Line No 20. Save the file. It s done. Change Layout for Single Post In this theme pack we have added 4 different layout s for your blog post. Here is the list of these 4 layouts. 1. Blog Post 2. Full Width Without Comments 3. Full Width 4. Post Without Comments If you wish to use one of the template, here's how to do it.

21 Log in to your WordPress admin panel. Click on Post > Add New. Enter the Page title of your choice for example Plan your week with these quick & easy recipes or any other name you wish to keep of your page. In visual editor WYSYWIG editor, you can enter your own content and publish the page as you would normally do. Choose any of one from these four templates from Single Post Template Meta box. Save the post and publish it. It s done Setting up a Post as a Featured or Editor Choice and Image In this we have added a Meta box. From this Meta box you can set a post as Editor Choice or Feauted. You can also add an image from this Meta box. Here s how to do it. Log in to your WordPress admin panel. Click on Post > Add New or Edit any post. Choose Yes from the Editor Choice Dropdown to set the post as Editor Choice. Choose Yes from the Featured Dropdown to set the post as Featured. Choose an image for this post Save the post and publish it. It s done