semplice - wordpress theme · a handy guide to help you get the most out of your new wordpress...

Semplice - WordPress Theme

A handy guide to help you get the most out of your new

WordPress theme. Some quick tips, how-to’s and a bit of

general information to get you on your way.

We would like to give you a massive thank you purchasing this theme from www.themeforest.net. This document covers installation and how to use the

theme and will most probably tell you how to fix common problems and issues. Please read this document completely if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, please post

them in our dedicated support forum;

http://support.sukkapunchmedia.com

Created by SukkaPunchMedia - www.sukkapunchmedia.com

http://support.sukkapunchmedia.com



1. Getting Started 4

1.1 Installation 4

1.2 Setting up the Theme 4

1.3 Setting up Homepage 5

1.3.1 Image Carousel 5

1.3.2 Project Drawer 5

1.3.3 Content Blocks 5

1.3.4 Recent Projects and Posts 5

2. Theme Features 6

2.1 Post Formats 6

2.1.1 Standard 6

2.1.2 Link 6

2.1.3 Image 6

2.1.4 Audio 6

2.1.5 Video 7

2.2 Mega Menu 7

2.3 Custom Widgets 10

2.3.1 Flickr Photos Widget 10

2.3.2 Latest Tweets Widget 10

2.3.3 Posts Widget 10

2.3.4 Social Media Widget 11

2.3.5 Search Widget 11

2.5 Shortcodes 12

2.5.1 Google Shortcodes 12

2.5.2 Related Posts Shortcode 13

2.5.3 Email Shortcode 13

http://www.sukkapunchmedia.com



2.5.4 PayPal Shortcode 13

2.5.6 Column Shortcodes 13

2.5.7 Button Shortcode 14

2.5.8 Alert Shortcodes 14

2.5.8 Notification Shortcode 14

2.6 Custom Page Templates 14

2.6.1 Archives Template 14

2.6.2 Full Width Template 15

2.6.3 Contact Form Template 15

2.7 Custom Login Logo 15

2.8 Featured Images 15

2.9 Localisation 16

3. Theme Options 16

3.1 General 16

3.2 Styling 16

3.3 Homepage 16

3.4 Carousel 17

4. Theme Files 17

4.1 Cascading Style Sheets 17

4.2 JavaScript 18

4.3 PSD’s 19

4.3 Social Icons 19



1. Getting Started

To install this theme you will need to have a fully working version of WordPress 3.1 already installed. For information in regard to installing WordPress, please read;

WordPress Codex - http://codex.wordpress.org/Installing_WordPress

1.1 Installation

The first thing that you will need to do is upload all the theme files to your webserver and then activate the theme. There are two ways that you can upload your files;

WordPress Upload: Navigate to Appearance > Themes > Install Themes > Upload. Click browse and select the zipped theme folder. Then press “Install Now” and the theme will be uploaded and installed on your server. FTP Upload: Using your FTP program, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server. This is our recommended option.

After you have uploaded the theme, you will need to activate it. Go to Appearance > Themes > Manage Themes and activate your newly uploaded theme.

1.2 Setting up the Theme

To set up the Theme you will first have to create two new pages; Home and Blog. You can add new pages by navigating to Pages > Add New. You can give these new pages a title however you do not need to include any actual content.

Select the relevant template ‘Home’ or ‘Blog’ form ‘Page Attributes’ and click ‘Publish’. Once you have created the new pages which use the correct page templates, navigate to Settings > Reading to configure the “Front Page Displays” setting.

To set up the Homepage you need to select the static page option and choose the ‘Home‘ page you just created as your front page. Your homepage is now created and can be viewed by visiting your root URL. Now repeat for the Posts page and choose ‘Blog’.



1.3 Setting up Homepage

The theme comes jam packed with cool features that control the layout and extend the functionality of the homepage. This section documents how to use them;

1.3.1 Image Carousel

This theme comes with two methods to display your greatest projects on the home page.

Image Carousel: The image carousel can be enabled by navigating to Appearance > Theme Options > Homepage Options and checking Display Project Carousel. Then to add items to the carousel, navigate to Appearance > Theme Options > Carousel Options and choose the projects you want to appear in the carousel. Please note the carousel won’t appear until there are at least nine projects set to appear in it, until there are nine projects the slider will be used.

Image Slider: The image slider is configured in the same way as the image carousel, but instead of checking Display Project Carousel, uncheck it. Add projects to the image slider in the same way as the image carousel.

1.3.2 Project Drawer

This theme comes with a custom AJAX project drawer that offers a unique way to display your projects information on the home page. To enable the project drawer, navigate to Appearance > Theme Options > Homepage Options and check ‘Enable Project Drawer’.

1.3.3 Content Blocks

This theme comes with three custom content blocks on the home page. To customise these blocks, navigate to Appearance > Theme Options > Homepage Options and configure the Home Block Title, Home Block Image and Home Block content fields for the three blocks. Alternatively you can disable them completely by unchecking ‘Display Home Blocks’. 1.3.4 Recent Projects and Posts

This theme displays three of your latest projects and posts. To enable this feature, navigate to Appearance > Theme Options > Homepage and check ‘Display Recent Projects’ or ‘Display



Recent Posts’. There are two more configurable options available for each of these sections, Recent Projects Title, Recent Projects Description for projects and Recent Posts Title, Recent Posts Descriptions for posts.

2. Theme Features

Although we happen to think that Wordpress is the bestest thing since sliced bread. This theme comes rammed full of features that control the layout and extend the basic functionality of Wordpress. This section will document the features and how to use them.

2.1 Post Formats

When you create a new post, you will be able to select a number of post types and formats. These will affect the layout and styling of each post. Some post formats have their own custom options. These will only appear once the post format has been selected.

2.1.1 Standard

The standard post format will display the title and content and does not have any custom options or display any featured images what-so-ever.

2.1.2 Link

The link post format has one custom option called ‘URL’. This is where you place the links URL. The title of the post will be used as the link text. This format will also display any content you may of added to the post.

2.1.3 Image

The image post format will display the title, content and a featured image of your choice. Make sure you create a featured image for this post format. The image will be automatically resized to 540px wide, the image height is flexible.

2.1.4 Audio

The audio post format will display a title and content along with a custom HTML5 audio



player. You will have two custom options to fill. The first is the link to an .mp3 file and the second is to an .ogg or .oga file. It’s important to add both formats in order for the audio player to work in all browsers. If you only supply one format please be aware that the audio player may not work in all browsers.

2.1.5 Video

The video post format will display a title and content along with a custom video or an embedded player depending on the options you have selected.

If your require the use of embedded video such as YouTube or Vimeo, you simply need to paste the code provided in the ‘embedded’ field and give the video a width of 540px. The embedded option overrides all other options, so if you want to use the custom video solution then make sure the embed field is empty!

If your require the self-hosted video solution, you will need to provide a height for the video. For the video to work in all browsers you will also need to provide an .m4v and .ogv file. Additional options include the ability to provide a ‘Video Poster Image’ link to an image that will operate as your video’s preview.

2.2 Mega Menu

This theme uses WordPress custom menus to build a stunning mega menu. You can setup custom mega menus to configure your site’s navigation. The theme comes with one custom menu location called “Primary Menu” and is located at the very top of the theme.

To setup your custom mega menu, simply navigate to Appearance > Menus. Give your menu a name and start to build it up using the available items, you can add a wide selection of items including; pages, categories, custom links, etc,.



Level 1 - Primary Navigation: The level for displaying your sdtandars website links. i.e home, service, portfolio, etc. The primary navigation can be made up of links to pages, categories, custom links, posts, projects and tags.

Level 2 - Title and Description: To create a text description area within the mega menu, simply add a custom link with a # in the url field. Once added add your content to the description field.

Example:

Leval 2 - Secondary Navigation: The secondary navigation can be made up of links to pages, categories, custom links, posts, projects and tags. Please be aware that any descriptive text set within the page, project, post, etc. will need to be removed from the description field before saving the menu.

Example:



Level 3 - Secondary Sub-Navigation: The secondary sub-navigation is the last level in our custom mega menu. Any elements added beyond this point will display under the parent element.

Final Example:

This structure:

Creates this menu:



2.3 Custom Widgets

This theme comes with 6 completely custom widgets that can be used to configure how your website displays its content - you can find them under Appearance > Widgets.

To extend any of the available widgets, choose the screen options tab at the very top of the page and configure the available options. There are 2 large and 4 smaller areas to place each of the widgets.

2.3.1 Flickr Photos Widget

The Flickr widget allows you to configure and display photos from a user’s photostream on www.flickr.com. The available options for this custom widget are;

Title: The title of the widgetFlickr ID: The Flickr ID of the group or user’s photos you wish to display.Number of Photos: Choose the number of photos to display, upto a maximum of 10.Source: The type of photos you which to display either user or group.Display: Choose how you would like to display the photos either latest or random.

2.3.2 Latest Tweets Widget

The Latest Tweets widget allows you to configure and display the latest feeds from your twitter account. The available options for this custom widget are;

Title: Title of the widgetUsername: The twitter.com username of the user you wish to display.Number of Tweets: Choose the number of tweets to display - upto a maximum of 20.Cache Tweets: Set the length of time to cache tweets for in seconds.Follow Link Text: Choose the anchor text for the link to your Twitter profile. Leave this option blank if you do not wish to display a link.

2.3.3 Posts Widget

The Posts widget allows you to configure and display the latest or most popular posts. The available options for this custom widget are;



Title: Title of the widgetType: Choose from either popular or latest posts to displayExcerpts: Choose to display an excerpt from the postNumber of Posts: Choose the number of posts to display - no maximum.

2.3.4 Social Media Widget

The Social Media widget allows you to configure and display links to your social media accounts. The available options for this custom widget are;

Title: Title of the widgetdeviantART Username: The deviantART username of the user you wish to link to. Digg Username: The Digg.com username of the user you wish to link to. Facebook Username: The Facebook username of the user you wish to link to. Flickr Username: The Flickr username of the user you wish to link to.GitHub Username: The GitHub username of the user you wish to link to. Google+ Username: The Google+ username of the user you wish to link to. LinkedIn Username: The LinkedIn username of the user you wish to link to. MySpace Username: The MySpace username of the user you wish to link to. Tumblr Username: The Tumblr username of the user you wish to link to. Twitter Username: The Twitter username of the user you wish to link to. Vimeo Username: The Vimeo username of the user you wish to link to. YouTube Username: The YouTube username of the user you wish to link to.

2.3.5 Search Widget

The search widget allows you to configure and display the search field on page. The available options for this custom widget are;

Title: Title of the widgetPlaceholder Text: The default text displayed in the search field (i.e. Type and enter to search).

2.3.6 Quote Widget

The search widget allows you to configure and display the search field on page. The available options for this custom widget are;



Title: Title of the widgetQuote: The quote text to be displayed.Cite: The citation of the displayed quote

2.5 Shortcodes

This theme comes loaded with a number of shortcodes that allow you to add styled content to your site with minimal effort. Using shortcode are extremely easy;

2.5.1 Google Shortcodes

2.5.1.1 Google Adsense:

These Google Adsense shortcode allow you to Google Adsense to your content. Requirements include; client id, slot, width and height.

[adsense client="pub-XXXXXX" slot="XXXXXX" width="468" height="60"]

2.5.1.2 Google Charts:

These Google Charts shortcode allow you to Google Charts to your content. Requirements include; data, background (bg), labels, colours, size (WxH), title and chart type (line, xyline, pie, pie2d, sparkline, scatter, venn and meter)

[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA"labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]

The above example creates this;

For more information on using Google Charts please vist http://code.google.com/apis/chart/

http://code.google.com/apis/chart/



2.5.2 Related Posts Shortcode

The related posts shortcode allow you to add a list of posts that are related to the current content. Available options are; title and post limit.

[related_posts title="Related Posts" limit="5"]

2.5.3 Email Shortcode

The email shortcode allow you to add an email address to your content that is obfuscated by javascript. The only available option is email address.

[email address="[email protected]"]

2.5.4 PayPal Shortcode

The PayPal Donate shortcode allows you to add a ‘Donate’ link to your content. Available options include; account, what the donation is for and the text to display.

[donate account="[email protected]"for="Donation for your greatness"] Please Donate [/donate]

2.5.6 Column Shortcodes

It is simple to create columns within your website content, you first need to create a new post (or edit an existing one), then in the editor type the shortcode in brackets, such as:

[one_half] Place your content here [/one_half]

Use these shortcodes to create several columns on a page or post. Make sure that the last column always gets the keyword ‘last’ applied!

[one_third] Place your content here [/one_third] [one_third] Place your content here [/one_third]

[one_third_last] Place your content here [/one_third_last]



2.5.7 Button Shortcode

These button shortcode allow you to add buttons to your content and can be linked to any URL. Style options include; light, dark, green, red, blue, orange and purple. Sizes include; standard and large.

[button link="#" size="large" color="light"] Button Text [/button]

2.5.8 Alert Shortcodes

The alert shortcode allow you to add passages of text styled with an array of colours. These could be used as alerts, warnings, notifications etc. Style options are Red, Green and Blue.

[alert color="red"] This is a Red alert! [/alert]

2.5.8 Notification Shortcode

The notification shortcode allow you to add text notifications styled with an array of colours. These could be used as alerts, warnings, notifications etc. Notification types are success, warning, error and info.

[notification type="success"] A success notification [/notification]

2.6 Custom Page Templates

This theme comes with a number of custom page templates built in. The templates can be used on individual pages to alter the display or functionality.

2.6.1 Archives Template

To create your archives area, you first need to create a page using the ‘Archives’ page template. The archive lists will now automatically display below any page content. Lists include last 30 posts, archives by month and archives by subject.



2.6.2 Full Width Template

With the full width template you are able to create a page without a sidebar. The main content will span the full width of the website. To create a page using the full with template, you simply need to add a page using the ‘Full Width’ page template.

2.6.3 Contact Form Template

To use the contact form template, you simply need to create a page and use the ‘Contact’ page template. The form will automatically insert below any page content that you add. The form includes jQuery validation to enhance the user experience and the recipient email can be configured from the theme options.

2.7 Custom Login Logo

This theme comes with the ability to replace the default WordPress login logo. To replace the logo, all you need to do is name your logo ‘custom-login-logo.png‘ and then upload to the themes /media/images/ folder. Once the logo is uploaded the it will become visible on the WordPress login screen.

2.8 Featured Images

This theme supports the use of featured images, including the support for auto-resizing of the featured images, leaving only the requirement to specify a single image. Auto-resizing only occurs when the image is uploaded for the first time, images that have been uploaded previously will not be automatically resized.

To upload a post thumbnail, go to Posts > Add New or open an existing post in editing mode. Find the Featured Image module then click the ‘Set featured image’ link, the usual WordPress image uploader should then appear, this is where you will upload your image.

Notice: make sure that the image uploaded it is either the same size or larger than the final thumbnails size. Once you’re finished uploading the image, click the “Set Featured Image” link, next to the button to insert the photo into the post.

For more on how to use the Wordpress Post Thumbnail feature you can view this article;http://en.support.wordpress.com/featured-images/

http://en.support.wordpress.com/featured-images/



2.9 Localisation

This theme supports localisation and includes a .pot template file, localisation is used to translate all availabe strings in the theme to alternate languages. The localisation file can be found in the language folder /languages/ and is named default.pot.

3. Theme Options

To make configuring your theme a piece of cake we have included a theme options panel. Allowing you to easily change and update many of the features that control the layout and style of the theme. This section will document the features and how to use them.

3.1 General

Plain Text Logo: Enable this to display a plain text logo instead of an image logo. The logo will be named the same as the blog title which can be configured by navigating to Settings > General and entering your desired title in the Site Title field.Logo: Upload a custom logo.Contact Form Email Address: Enter the email address to use as the recipient of the contact form when using the contact form template.RSS Feed URL: Enter the URL to your custom RSS feed if you wish to use an external RSS service such as FeedBurner over the default WordPress feed. Leave this field blank to use WordPress’s feed.Display Footer: Check this to enable a footer for the site.Copyright Footer: Enter the copyright statement that you wish to display on the left side of the footer.Footer Text: Enter some text that you want to appear on the right side of the footer.Tracking Code: Enter the analytics tracking code from a service such as Google Analytics minus any script tags.

3.2 Styling

Theme Style: Choose the theme style that you wish to apply to your site. Highlight Colour: Choose the highligh colour you wish to apply to your site. Default: Pink.Custom CSS: Enter some custom CSS to give your site a unique look.



3.3 Homepage

Display Project Carousel: Check this box to enable the project carousel. You must assign at least six items to the carousel before it will become active. A slider will be used until the project carousel requirements are met.Enable Project Drawer: Check this to enable an AJAX project display drawer on the homepage.Initial Project Drawer State: Choose the initial state for the project drawer; open or close.Initial Project Info State: Choose the initial project drawer info panel state; open or close.Display Home Blocks: Check this to display the three home blocks on the homepage.Home Block Title: Enter the title for the home block.Home Block Image: Upload an image that will sit next to the title of the home block.Home Block Content: Enter the content for the home block.Display Recent Projects: Check this to display three recent projects on the homepage.Recent Projects Title: Enter a title to display next to the recent projects.Recent Projects Description: Enter a description to appear under the title next to the recent projects.Display Recent Posts: Check this to display three recent posts on the homepage.Recent Posts Title: Enter a title to display next to the recent posts.Recent Posts Description: Enter a description to appear under the title next to the recent posts. 3.4 Carousel

Featured Projects: Choose which projects you want to display on the homepage slider/carousel.

4. Theme Files

In this section we discloses the sources of various files that we used within the theme and we try to describe their functions. This section is for you to get an understanding on how the theme functions behind the scenes if you are considering any type of modification.

4.1 Cascading Style Sheets

The theme includes a number of CSS files that are used at various times depending on user-controlled options. All CSS files, with the exception of the main CSS file (style.css) can be found in the theme’s /css/ folder.



Style.css - This is the theme’s main stylesheet and this determines most of the styling.ie.css - This is the theme’s stylesheet for fixing the stupid errors Internet Explorer creates.light.css - This is the theme’s light skin stylesheet, this is our favourite.dark.css - This is the theme’s dark skin stylesheet.

4.2 JavaScript

To build this theme we have had to use various Javascript files depending on; page being viewed, widget configuration and theme options.

jQuery Library - jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Full details can be found at http://jquery.com/

jQuery Validation Plugin - This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customisation. Full details can be found at http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jQuery UI - jQuery UI provides abstractions for low-level interaction and animation. Full details can be found at http://jqueryui.com/

JPlayer - The jQuery HTML5 Audio / Video Library. Full details can be found at http://www.jplayer.org/

Nivo Slider - This jQuery plugin is used on the home page to display a slideshow of featured projects when the carousel is not active. Full details can be found at http://nivo.dev7studios.com/

Masonry - Masonry is a dynamic grid layout plugin for jQuery. Masonry arranges elements vertically, positioning each element in the next open spot in the grid. Full details can be found at http://masonry.desandro.com/

ImagesLoaded - This jQuery plugin is used to detect when all images are loaded on a masoned page. Full details can be found at http://desandro.github.com/imagesloaded/

Form - This jQuery plugin is used to add additional functionality to the contact form. Full details can be found at http://jquery.malsup.com/form/

http://jquery.com/

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://jqueryui.com/

http://www.jplayer.org/

http://www.jplayer.org/

http://nivo.dev7studios.com/

http://nivo.dev7studios.com/

http://masonry.desandro.com/

http://desandro.github.com/imagesloaded/

http://jquery.malsup.com/form/



carouFredSel - This jQuery plugin is used on the home page to display a carousel of featured projects. Full details can be found at http://caroufredsel.frebsite.nl/

main.js - This script is responsible for adding dynamic content and additional functionality to the theme.

admin.js - This script is responsible for adding dynamic content and additional functionality to the admin area.

4.3 PSD’s

All PSDs included with this theme contain all the necessary styling for all elements including layouts, icons and all custom widgets.

4.3 Social Icons

The Social Icons used in our theme are free and can be used in your personal projects, for commercial websites a commercial license may have to be purchased. Full details can be found at http://www.iconshock.com/social-icons/

We would again like to thank you for purchasing this theme!If you do have any questions that are beyond the scope of this document,

please feel free to post them in our dedicated support forum.

Happy WordPressing!

http://caroufredsel.frebsite.nl/

semplice - wordpress theme · a handy guide to help you get the most out of your new wordpress...

Documents