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 x common problems and issues.
Please read this document completely if you are experiencing any diiculties. 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
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
1. Getting Started 4
1.1 Installation 4
1.2 Setting up the eme 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. eme 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
Semplice - WordPress Theme
Created by SukkaPunchMedia - 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 Notication 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. eme Options 16
3.1 General 16
3.2 Styling 16
3.3 Homepage 16
3.4 Carousel 17
4. eme Files 17
4.1 Cascading Style Sheets 17
4.2 JavaScript 18
4.3 PSD’s 19
4.3 Social Icons 19
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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 rst thing that you will need to do is upload all the theme les to your webserver and then
activate the theme. There are two ways that you can upload your les;
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 eme
To set up the Theme you will rst 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 congure 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’.
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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 congured 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 oers 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 congure the
Home Block Title, Home Block Image and Home Block content elds 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
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
Recent Posts. There are two more congurable 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. eme 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 aect 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
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
player. You will have two custom options to ll. The rst is the link to an .mp3 le and the
second is to an .ogg or .oga le. 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’ eld 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 eld 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 le.
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 congure 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,.
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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 eld. Once added add your content to the description eld.
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 eld before
saving the menu.
Example:
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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:
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
2.3 Custom Widgets
This theme comes with 6 completely custom widgets that can be used to congure how your
website displays its content - you can nd them under Appearance > Widgets.
To extend any of the available widgets, choose the screen options tab at the very top of the page
and congure 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 congure 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 widget
Flickr 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 congure and display the latest feeds from your
twitter account. The available options for this custom widget are;
Title: Title of the widget
Username: 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 prole. Leave this
option blank if you do not wish to display a link.
2.3.3 Posts Widget
The Posts widget allows you to congure and display the latest or most popular posts. The
available options for this custom widget are;
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
Title: Title of the widget
Type: Choose from either popular or latest posts to display
Excerpts: Choose to display an excerpt from the post
Number of Posts: Choose the number of posts to display - no maximum.
2.3.4 Social Media Widget
The Social Media widget allows you to congure and display links to your social media
accounts. The available options for this custom widget are;
Title: Title of the widget
deviantART 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 congure and display the search eld on page. The available
options for this custom widget are;
Title: Title of the widget
Placeholder Text: The default text displayed in the search eld (i.e. Type and enter to search).
2.3.6 Quote Widget
The search widget allows you to congure and display the search eld on page. The available
options for this custom widget are;
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
Title: Title of the widget
Quote: 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 eort. 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+trafc|Other"
colors="058DC7,50B432,ED561B,EDEF00" size="488x200"
title="Trafc Sources" type="pie"]
The above example creates this;
For more information on using Google Charts please vist http://code.google.com/apis/chart/
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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 rst 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]
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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, notications etc. Style options are Red, Green and Blue.
[alert color="red"] This is a Red alert! [/alert]
2.5.8 Notication Shortcode
The notication shortcode allow you to add text notications styled with an array of colours.
These could be used as alerts, warnings, notications etc. Notication types are success,
warning, error and info.
[notication type="success"] A success notication [/notication]
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 rst 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.
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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
congured 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 rst 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 nal
thumbnails size. Once you’re nished 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/
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
2.9 Localisation
This theme supports localisation and includes a .pot template le, localisation is used to translate
all availabe strings in the theme to alternate languages. The localisation le can be found in the
language folder /languages/ and is named default.pot.
3. eme Options
To make conguring 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 congured by navigating to Settings > General
and entering your desired title in the Site Title eld.
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 eld 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
eme 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.
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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. eme Files
In this section we discloses the sources of various les 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 modication.
4.1 Cascading Style Sheets
The theme includes a number of CSS les that are used at various times depending on user-
controlled options. All CSS les, with the exception of the main CSS le (style.css) can be found
in the theme’s /css/ folder.
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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 xing 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 les depending on; page being viewed,
widget conguration and theme options.
jQuery Library - jQuery is a fast and concise JavaScript Library that simplies 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 oering 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/
Semplice - WordPress Theme
Created by SukkaPunchMedia - www.sukkapunchmedia.com
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!