Responsive WordPress Theme with multiple options by PEGO

Transcription

1 Responsive WordPress Theme with multiple options by PEGO Thank you for purchasing BOOSTER WordPress Theme. This document will make it as easy as possible to build your site with the BOOSTERWordPress Theme. It it recomended that you read it before starting the build of your page. If you still come up with any problemos or just a info question about the theme, you are free leave a comment under the BOOSTERTheme on the ThemeForest.

2 1. Getting started Installing the BOOSTER theme Setting up the logo, icons and copyright text Styling Left Side Background Create some pages Create home page and slider Creating portfolio Creating portfolio categories (for filter) Creating portfolio items Create portfolio item - IMAGE Create portfolio item - VIDEO Create portfolio item - SLIDESHOW Create blog page Create post for blog Create contact page Contact google map settings Contact mail settings Contact form settings Create some child page Create some page with external link Create some page with shortcodes Shortcodes General Theme Options Theme details »Stuff used«

3 1. Getting started The chapter shows some basic instructions how to set up the BOOSTERWordPress Theme. The BOOSTER is Responsive ONE SLIDE Wordpress Theme. Its clean and simple and also focused to that what visitor want to see. And also SEO is very good. 1.1 Installing the BOOSTER theme To set up the BOOSTER theme folow the steps below: 1. if you don't have the WordPress installed, then installed it 2. add the BOOSTER theme to your Wordpress. You have two options to do this (choose only one of this steps): - using some FTP program. You upload the folder booster (first unzip the file booster.zip) to your server wp_instalation_folder/wp-content/themes/ - the second option is to install the theme using WordPress Upload. To do this go to Appearance > Themes > Install Themes >Upload and upload thebooster.zip file from booster-package.zip 3. go to admin to activate the theme 4. the theme options are visible after you activate theme - 3 -

4 Example image after you activate BOOSTER theme 1.2 Setting up the logo, icons and copyright text Setting the logo Go to Theme Options -> Left Side. You will see some Logo upload field (image below). Just click on the button upload and the popup window will open. Then just drag your logo and click button Insert into Post Setting the icons and copyright text Example image of logo uploading Go to Theme Options -> Left Side. You will see some input fields Input for widget header area(html). If you want to have like in preview just paste the code: <ul> <li><a id="icon1" href="#"></a></li> <li><a id="icon2" href="#"></a></li> <li><a id="icon3" href="#"></a></li> </ul> - 4 -

5 booster 2012 <a href="#">privacy Policy</a> Here is also some options for text styling. So if you write some text or some links you can style them. Example image of input field for icons and copyright text and text styling 1.3 Styling Left Side Background We named Left Side because is on the left. This is area where is located logo, menu, icons, copyright text. If you want to style the Left Side go to Theme Options -> Left Side. Look for the title Background settings (image below). Then you can set background-color, background image background repeating and position

6 Example image of options for styling the left side 2. Create some pages This steps are very important, so please DO follow them 2.1 Create home page and slider First go to Settings -> Permalinks. Then you can see Common Settings and choose Post name. This is for better SEO permalinks and that the BOOSTER theme is working properly. Example image how to set better permalinks Now go to Pages -> Add New. Write some name (in preview is HOME). Now scroll down and you will see some Page Options (image below)

7 Now you see option Page Template (Select page template). Click on the dropdown menu and select Home. All other options are NOT for the home page. SAVE IT! Now the home page is created. Now we must create some slides. Go to Slider -> Add New. Here you can set 4 options. First we have to write some title of the slide (if you look on the preview site, the first slide title is THIS IS TIME). Then we must set featured image. Click on the link Set featured image. Then you will see popup and just drag images and click on the bottom Set featured image. The best size of images is 463px(width) x 1000px(height). Then write some description text on content panel

8 And finnaly if you wish you can add some link (outer or inner). SAVE IT! The best look of the site will be if you create minimun 3 slides Creating portfolio First you have to create a new page. Go to Pages -> Add New. Write some title (in the preview is Portfolio). Then scroll down where you can see Page Options. Where is Page Template choose Portfolio from the dropdown menu. Also you can see some extra text Page title text, and just write some description if you like. And finnaly you can choose if you want to show filter or not (Show filter? Yes/No)

9 Example image of Page options and what is on preview site Creating portfolio categories (for filter) If did you choose to Show filter in upper section (2.2) then you have to create some categories. Go to Portfolio ->Portfolio categories.and write some name (image below). Example image how to create portfolio category Creating portfolio items First we have to add names to those extra fields (in preview is CLIENT, RELEASE DATE, JOBS DONE, URL). This is very important to do this before creating portfolio items

10 Go to Theme Options- >Portfolio. You can see Portfolio Description 1-5. Here you must write something otherwise will not show up on the single portfolio site... You will se why in the chapter where we will create portfolio items Create portfolio item - IMAGE Go to Portfolio -> Add New. Enter the title in the title section, write some description in main panel and set featured image (this is portfolio image nothing else ). For the featured image there are no rules how big must be image, because images will be resized auto. Then choose some category (which you made in chapter before) because of function of filtering

11 Then scroll down and you can see Portfolio options. Image below show how we filled for one item on the preview site... This are descriptions what we talk about it in section And this options are avaible in every portfolio item when you will create it Create portfolio item - VIDEO Here is the same procedure like in section Just in portfolio options instead of Image choose Video. IMPORTANT! Scroll down and you can see Portfolio video options. Here you must fill both fields (look image below). In the first field (Video URL iframe), this is URL when you are in single portfolio. For example here: This video is inline, is not like popup. In the second field (Video URL embeded link), this is URL that when you click on the image will open the video in popup like gallery. For example if you go here and click on the small image Pego Design and it will open it in the popup. SAVE IT! This is hard to explain, so if you will have some problem just contact us and we will help you

12 Create portfolio item - SLIDESHOW Here is the same procedure like in section Just in portfolio options instead of Image choose Slideshow. IMPORTANT! When you are creating featured image, just drag and drop multiple images and set ONLY ONE for the featured image. 2.3 Create blog page Go to Pages -> Add New. Write some title (in preview is BLOG). Scroll down to Page options. Where it says Page template, choose Blog from dropdown menu. Also you can write some extra text in Page title text field. After you create BLOG page you will see something like this (image below). Don't get scared. The default post doesnt have any featured image Create post for blog Go to Posts -> Add New. Write some title, add some content text, set featured image. Scroll down to General post options and choose Image

13 If you want to have slideshow in post just choose Slideshow. Only what is different from Image post is that, when you creating featured image, you must drag and drop multiple images and set only one for the featured image (like section when creating portfolio item slideshow). If you want to have Video in post, just choose Video. Plus you must add some URL for image. Look below into General post options, and you will see Video URL. Insert some url to Video Create contact page Go to Pages -> Add New. Write some title (in the preview is Contact). Scroll down to Page options and choose Contact for Page template. You can also write some extra text that is near title (Page title text). As you can see in the preview, under map is some address and some other stuff. This you must write here where did you create Contact page in content text field Contact google map settings Go to Theme Options- > Contact. Fill Map Lat and Map Lng Contact mail settings Contact form is created that will work on every server. Some servers where you are hosting your domain/website need SMTP authentication. So you will have to create some mail, with pass. First go to your cpanel of your server or domain and create some mail (like: with some pass (like: ). If you already have created mail with some pass then is OK. Because of SAFETY you will have to open file MailHandler.php. Go to folder booster/mail/. Here you will find this file. Open it with some html editor or with Notepad. You have to change the lines from 6 to 10. Look at the images. If you will have some problem just contact us and we will do this for you. Whay you must do this? BECAUSE IS MORE SAFER

14 Line 6: Insert the mail that you created it with password. Line 7: Insert the mail where to will s be sended (you can use mail that you inserted in line 6) Line 8: Insert your mail host domain (ask your provider, but probally is mail.your-domain.com) Line 9: Insert the mail that you created Line 10: Insert password that you created it when you created mail address... If you dont know this information you can contact us, or your server provider and ask them for SMTP host: SMTP user: SMTP pswd: Contact form settings Go to Theme Options- > Contact and set options for contact form

15 2.5 Create some child page Go to Pages -> Add New. Write some title and other stuff like before. On the right side you have options Page Attributes -> Parent. From the dropdown menu choose whic page do you want it to parent. 2.6 Create some page with external link Look at the preview in the menu where is BUY IT. If you click on it it will redirect to other page. Go to Pages -> Add New. Write some title. Scroll down and see where it say Insert link of the external page. Put into some external link Create some page with shortcodes Go to Pages -> Add New. Write some title. In the content section just copy shortcodes. Shortcodes are in folder documentation in file shortcodes.html (open file with some html editor)

16 3.Shortcodes BOOSTER theme gives you an option to set up your own pages by using shortcodes.you can see it in file shortcodes.html ( open it with some editor so that you can see comments and copy the code ). OPEN FILE shortcodes.html in folder documentation with some code editor (like notepad c++, coda,..) or with text notepad. There you can find all working shortcodes. Then just copy the needed code and use it. 4. General Theme Options Go to Theme Options -> Theme Options. There you can set main template color, upload favicon icon, main background setting, content background settings, main text font settings, page titles and all headings. And also, you can turn off responsive design. So that you page will not be responsive. Everything is on click. 5. Theme details 5.1»Stuff used«porfolio filter The filter used for filtering portfolio items at its categories is: 6. Updates 6.1. Update 1.0 What we added/changed: we added the field»show page in menu?«, this feaured offers you to create a page and not necesearly put it in the menu. we have fix the bug for multiple portfolio slideshow items(you can now add as many slideshow as you want)

17 we fixed a bug that appears when creating multiple portfolio pages. We also add a feature that offers you to create multiple portfolios with only choosen categories. For example if you want a portfolio page with categories cat1 and cat2, you put this in the»include category«field: cat1::cat2 (notice that you must input the category slugs!). You can create up to 5 portoflios with filter. The ones without filter are unlimited. we have upgade the inner scroller(ipad, iphone, android) Thank you for purchasing BOOSTERWordPress Theme. Hope this document helped you, if not, we will help you