4. Setting Up The Theme
Homepage
- Go to Pages -> Add New to create a new page.
- Give your page a title and leave the main writing text empty.
- Scroll down to the Page Settings panel and in the Top Content text box add the following shortcode:
[accordion_slider name="accordion" cats="" width="1200" height="550" slides="7" sticky="true"]
- To display slides in your slider from specific categories add your category IDs to the
cats=""option (go to Slides -> Slide Categories and get the IDs from the ID column). - Scroll down to the Page Settings panel, select the Hide Page Title, change the Breadcrumbs drop down menu option to Disable and change the Layout drop down menu option to Fullwidth.
- Scroll down to the Discussions panel and uncheck the Allow comments option, if you cannot see the Discussions panel click here.
- Go to Settings -> Reading, select A static page option and from the Front page drop down menu select the page you just created (leave the Posts page drop down menu empty).
- You can create your own custom homepage layout by using different shortcodes and changing the shortcode options. For a full list of the shortcodes available click here.
Sliders
Creating Slides- Go to Slides -> Add New to add a slide to the slider.
- On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this slide.
- After uploading or selecting your featured image click the Use as featured image link in the image upload window.
- Enter your page, image or video URL that you want the slide to link to in the Slide URL text field.
- On the right-hand side you can add your slide to a category from the Slider Categories panel.
- You can add the slider shortcodes to any page.
- To insert a slider add the following code to the main writing text box on any post or page:
[fade_slider name="fadeslider" cats="" slides="-1" effect="fade" width="1200" height="500" align="alignnone" nav="1" arrows="true" timeout="6" /]Accordion Slider
[accordion_slider name="accordionslider" type="horizontal" cats="" slides="6" width="1200" height="550" max_slide="" align="none" sticky="false" sticky_number="0" expand_on="mouseover" preload="true" /]
- To add slides from a specific category add the slider category IDs to the
cats=""option (go to Slides -> Slide Categories and get the IDs from the ID column). - You can also change a variety of other slider options by adjusting the shortcode, for a full list of slider options see the fade slider shortcode and accordion slider shortcode pages.
Portfolios
You can create portfolio posts just like posts and then you can create a new page, add something called a shortcode inside the main writing text, which will display your portfolio posts. The shortcode options can be adjusted to change a variety of portfolio options.
Creating Portfolio Posts- Go to Posts -> Add New to create a new post.
- Give your post a title and some text in the main writing text box.
- Scroll down to the Post Settings panel where you can control the way the post looks.
- On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this post.
- After uploading or selecting your featured image click the Use as featured image link in the image upload window.
- To add additional images/audio/images in a lightbox click the the Add Media button, upload your files and give them an order value of "1".
- On the right-hand you can assign your post to categories from the Categories panel.
- Go to Pages -> Add New and insert the following portfolio shortcode into the main writing text box:
[portfolio name="" type="three-col" cats="" col_height="" image_width="" image=_height="" per_page="9" orderby="date" order="desc" excerpt_length="50" title="true" pagination="true" preload="false" /]
- To add posts from a specific category to a portfolio shortcode add the category IDs to the
cats=""option (go to Posts -> Categories and get the IDs from the ID column). - You can also change a variety of other portfolio options by adjusting the shortcode, for a full list of portfolio options see this page.
Blog Pages
- Go to Pages -> Add New and insert the following blog shortcode into the main writing text box:
[blog images="true" cats="" image_width="528" image_height="213" per_page="9" orderby="date" order="desc" offset="0" excerpt_length="50" meta="true" full_content="false" title="true" divider="line" pagination="true" preload="false" wrap="false" cols="2" /]
- To add posts from a specific category to a blog shortcode add the post category IDs to the
cats=""option (go to Post -> Categories and get the IDs from the ID column). - You can also change a variety of other blog options by adjusting the shortcode, for a full list of blog options see this page.
Navigation
- Go to Appearance -> Menus to set up your header and footer navigation menus.
- Click the + button and create two menus.
- On the left-hand side from the Theme Locations panel select your menus from the Header Navigation and Footer Navigation drop down menus.
Shortcodes
This theme comes with several shortcodes. Shortcodes are pieces of code that can be inserted directly into your main text box on posts and pages to add certain content easily such as videos and dividers.
- Click the Visual tab at the top of the main text box on any post or page.
- Click the GP button to open the shortcode window.
- From the shortcode drop down menu select a shortcode, which will automatically be inserted into the main text box.
- You can view the full range of options for all the shortcodes from the following page.
Customising The Background
- Go to Appearance -> Background to add your own background colour or upload your own background image.
- If you only want to add a background colour with no background image you will still need to upload an image to overwrite the existing background image. Upload the transparent image that comes with the theme located at slide-theme/slide/lib/images/blank.gif.
Contact Page
- Go to Pages -> Add New to create a new page.
- Insert the contact form shortcode into the main text box e.g.
[contact email="youremail@address.com"]. - Replace
youremail@address.comwith your own email address. - If your contact form is not working click here.
Sidebars/Widgets
- Go to Appearance -> Sidebars, click the Add Sidebar link and give your new sidebar a name.
- Now go to any post or page and scroll down to the settings panel.
- Now select one of your sidebars from the Sidebar drop down menu.
- Go to Appearance -> Widgets and drag and drop widgets from the Available Widgets panel over the to your sidebar widget panels on the right.
- You can also add any of the shortcodes with the theme within a Text widget.
Customising Theme Design
You will probably want to customise the design of the theme. This may involve editing the HTML in the php files (theme structure) and the CSS in the style sheets (theme design). If you are not familiar with HTML and/or CSS you will want to hire a developer to modify the theme for you. You can contact one of these developers from here. If they are unavailable you will have to look elsewhere such as FreelanceSwitch.- Go to Appearance -> Theme Options -> CSS Settings and in the Custom CSS text box you can add your own CSS code to style the theme.
- The CSS code you add to this text box will overwrite the default styling of the theme.
- The benefit of adding your CSS code to the Custom CSS text box rather than editing the style sheets is that when theme updates are released your style modifications will not be overwritten.
- For example, to edit the link and link hover colours you would add the following to the Custom CSS text box:
a {
color: #ff0000;
}
a:hover: {
color: #000000;
}
- To change the tagline background you would add:
#tagline {
background: #ff0000;
}
- In order to style the theme you need to know the name of the HTML elements you want to restyle. To get the names you should use the Firebug add-on in Firefox (recommended) or the built-in developer tools in Chrome or Internet Explorer 8+. All you then need to do is right click on a particular section of the web page and it will tell you what styling tags are controlling it and what files the styling tags are located in. If you're not sure how to use Firebug (or other developer tools) follow the tutorial here.
Translation
- Install the translation program Poedit.
- Open the slide-theme/slide/languages/en_EN.po file with Poedit.
- Translate the file with Poedit, click here for more information.
- Locate wp-config.php, which is in the root directory of your WordPress installation and change the language, click here for more information.
- If you want your website to support multiple language you can use the qTranslate plugin.
Using The Lightbox
Gallery Shortcode
- To enable the lightbox on the
[gallery]shortcode additemtag="div" link="file"to the shortcode, like so:
[gallery itemtag="div" link="file" columns="3"]
Manual Use
- To use the image or video pop up effect on any content add
rel="prettyPhoto"to your links as follows:
<a href="http://example.com/imagename.jpg" rel="prettyPhoto"><img src="http://example.com/imagename.jpg" alt="" /></a> <a href="file=http://www.example.com/video.flv&image=http://www.example.com/image.jpg" rel="prettyPhoto[pp_gal]">Text Link</a>
- If you want to group items in the lightbox add
[pp_gal]to the link e.g.rel="prettyPhoto[pp_gal]". - You can add the following files to the lightbox, using the following formats:
- YouTube: file=http://youtu.be/Sw-H3FoV2lc&image=http://www.example.com/image.jpg
- Vimeo: http://vimeo.com/8245346
- QuickTime: http://www.example.com/video.mov?width=780&height=418
- FLV/MP4/M4V/MP3: file=http://www.example.com/video.flv&image=http://www.example.com/image.jpg
- OGV/OGG/WEBM: http://www.example.com/video.ogv
- External Site: http://www.twitter.com?iframe=true&width=400&height=200
- To disable the lightbox script that comes with this theme open slide-theme/slide/lib/scripts/custom.php and find and remove:
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square',
deeplinking: false,
social_tools: ''
});