CleanCut Wordpress Theme” Documentation by “Kriesi” v1.0


“CleanCut Wordpress Theme”

Created: 20/06/2010
By: Christian "Kriesi" Budschedl
Email: Kriesi

Informations about Updates and New Themes are always announced on Twitter and Facebook. Twitter updates are usually more up to date, facebook updates are more detailed and easier to follow :)




Hello! First of all I would like to thank you for purchasing my theme! :)
If you have any questions that are beyond the scope of this help file, please feel free to ask your question on the item discussion page.

This file will teach you how to set up and use the “CleanCut” - 3 in 1 Wordpress Theme.
This file is really extensive so you might think the theme is hard to use.
actually its not, you probably just might jump to the options page and explore everything yourself, this file is more of a reference work if you do not know what to do, or if you are not familiar to wordpress.

Have fun with your new theme! best regards
Kriesi


Table of Contents

  1. Folder Structure
  2. Installation
    1. Setting up the General Options
    2. Setting up the Mainpage
    3. Setting up the Slideshow Options
    4. Setting up the Portfolio
    5. Setting up the Blog
    6. Setting up the Contact Page
    7. Setting up the Menus of your site
    8. Setting up the Sidebar and Footer Area
    9. Using custom Widgets
    10. Adding Content (how to create entries and use preview images)
    11. Theme Shortcodes for content styling
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. PSD Files
  7. Image Sizes
  8. Sources and Credits

A) Folder Structure - top

 

B) Installation - top

The Theme comes with 5 different styles which can be activated at your wordpress admin panel.
You can either choose to upload the theme to your server via ftp (only upload the unzipped folder „CleanCut“ into the folder wp-content/themes/ ) or via wordpress upload function. to use the upload function of the wordpress admin panel make sure to ONLY upload the “CleanCut” folder and not the whole archive file that you recieved by themeforest.

Notice: if you are new to wordpress and have problems installing it you might want to check out this link: http://codex.wordpress.org/Installing_WordPress
After that is done activate the theme as you would activate any other theme at Appearance->Themes.
“CleanCut default" is now the active theme.

If you are working on an Installation that already has images uploaded to the media folder and you want them to be resized automaticaly please make sure to make your cache folder writeable for the resizing script. If you do not know how to set the permission please google it, every ftp program has a slightly different approach. I would recommend googeling for „set chmod to 777 with [your-ftp-programm] (eg dreamweaver)“

If you are working on a new installation or dont plan to use any previously uploaded images as preview images you can skip the step above.

Adding Dummy Content:

The theme comes with the great option to add dummy content to make it look like my Themeforest Live preview. To use this feature activate the theme and then open the theme options page: CleanCut Options. Check the checkbox for "add dummy content" and press the save button. The theme will import all post, page and category data and set it up similar to the live preview. Once done you can take a look how things are set up and use the dummy content as a starting point for your own cointent. that should make it much easier for you to use the theme, especially if you are new to wordpress.

If you dont want to install dummy content on your installation I would heavily recommend to create a test wordpress installation and try it to see how to setup everything :)


 

B 1) Setting up the general Options - top

If you want to change the general Options of the Theme go to the “CleanCut” Options Panel (at the bottom of your admin areas sidebar) and click it, the first thing you will notice is an option to choose skins: Just choose the skin you like best from the dropdown menu. Once you have pressed the save button at the bottom of the page the new skin will be applied to your frontpage.
Notice: If you want to further customize your skin by changing the CSS directly: the main css file is style.css within your theme-root folder. The CSS file that holds all color informations is located in your /css/ folder. Depending on the skin you have choosen you need to edit syle1,2,3 or 4.css


Changing your Logo:
You got 2 options to change your Logo: The easiest way is to simply enter the url of your own logo file into the input field. The default Logo will be replaced as soon as you have saved the page.

The second option is to edit your CSS Files directly. Depending on the skin you have choosen you need to either edit style1.css, style2.css or style3.css in your folder /css/.
Search for the #logo selector and change the background picture.

The size of the logo is set to 247px * 94px. If you want to use a smaller or bigger logo you will need to change the size manually in style.css


Setup Google Analytics Code
Last thing on the general options page to do is to add your google analytics code if you want to. Just add the code to the textarea and google will start tracking ;)

 



B 2) Setting up the Mainpage - top

Enter a Welcome Message for your front Page
This Message will appear bellow the Slideshow area


Frontpage Button
Choose a button text and a the page the button should link to


Mainpage Columns
The 4 mainpage columns below the frontpage slider can be populated either via posts of specific post categories, pages or widgets.


Mainpage additional Content
The page selected here will be displayed bellow the 4 mainpage columns. if some testimonials are created the content block will be displayed beside these testimonials


B 3) Setting up the Mainpage Slideshow - top

The slideshow can be controlled with the help of backend options. single slides are created by adding new slider entries but the transitions, durations and slider styling is managed at the option page. The options are pretty self explanatory:

Number of slides:
How many slides should be displayed?


Autoplay duration
The Autoplay Duration sets the time between each transiition in seconds.


Autoplay
Do you even want autoplay? If so click yes. Once a user interacts with the slider the autorotation stops.


Autoplay duration
The Autoplay Duration sets the time between each transiition in seconds.


Which slider?
You can choose between the newsslider, the accordion slider or the very flexible avia slider. The additional options bellow only apply when the aviaslider is choosen.


Rectangle Dimensions
The aviaslider uses rectangles or squares to create unique transitions. Here you can set the height and width of those rectangles/squares.


Transition
The transition direction can either be a coiling animation from the topleft or bottomright corner, a diagonal movement from the top left or the right bottom or a complete random appearance of the squares. You can choose to only use one transition or select a sequence that will be used for your transitions.


Box delay
The Time the script waits until the next square/rectangle gets displayed.


Transition Type
There are several transition type options for the rectangles. They can either just fade in, slide in or drop from top to bottom.


B 4) Setting up the Portfolio - top

Portfolio
To setup a portfolio first select the page that should display the portfolio items instead of the usual page content. then choose the portfolio categories that should be displayed on that page. (attention: those are not the normal post categories, portfolio categories can be setup at Portfolio Items>Portfolio Categories)

You can create as many Portfolio Pages as you wantwith different or similar categories. The portfolio sorting option will be displayed as soon as you choose at least 2 categories.


B 5) Setting up the Blog - top

Blog Page

First please choose an existing page that should house your blog content. This page will be set as the default blog overview page. Setting Up the blog page is really easy: Best practice is to first create a blank page with the name of your choice, then add that page to your main menu with the Menu Manager and after that is done open Blog settings and choose the page at the select box here.


Exclude Categories
Since you sometimes want to exclude categories from the blog I've added an option to do so


Blog Preview Images
This option controlls the Preview image behaviour of the blog


Blog Extra Headline
The Blog extra headline can be set here


B 6) Setting up the Contact Page - top

Setting Up the contact form is really easy: Best practice is to first create a blank page with the name of your choice, then add that page to your main menu with the Menu Manager and after that is done open Contact Page settings and choose the page at the select box. You can also choose the E-Mail adress the message gets sent to.

The setup process for the submit design form is virtually the same only that the forms used in the front end are a little bit different.

FAQ Contact: If your contact page seems to work on the front-end but doesnt deliver a mail, be sure that your server supports the sendmail protocol. (ask your server admin if this is turned on)
If you cant activate it I would recommend to get a plugin for your contact page, like cformsII. Also if you want to do major modifications to the form, like adding a Captacha I would recommend to use a Plugin (cforms II also supports this) Using a plugin is by far the fastest way to pull this off :)



B 7) Setting up the Menus of your site - top

The Theme comes with support for the new Wordpress 3.0 Menu feature. Just open Appearance->Menu in your backends Sidebar and add a New Menu called "Main", then add to this menu whatever menu items you need. If no menu is created a fallback menu will get displayed that shows all pages and a home link.


B 8) Setting up the Sidebar and Footer Area - top

Next step is to select those categories and Pages that should get a unique set of sidebars. For every category or page choosen here the theme will add a new Sidebar Widget area at appearance/widgets. Once you have choosen the pages and categories press save and head over to the widget section of wordpress.

You will see that the new areas just got appended to the predefined ones.
So adding these areas is easy.

However be very careful when removing widget areas that already got widgets applied to them.
Wordpress doesn't remember where it stored widgets by name, it stores this information by number. So if I would add a text widget to Contact here (Nr6), and then delete the content widget area the widgets would then be in Jobs. (previously in 7, now the new 6)

 


Last step todo is to choose if you want the theme to apply dummy widgets to either your sidebar or footer if you didnt set a widget manually. Whatever option you choose here. once you have set a widget for a page or category the default dummys wont be added to this page any longer



B 9) Using custom Widgets - top

The Theme comes with a custom widge that lets you display blog posts from one or more articles within your sidebar

The Sidebar News widget needs a title, the number of posts to display and which post from which category you want to display. To choose the categories you need to enter the IDs of those categories. If you dont know how to find those IDs:

Once you're logged in your WordPress dashboard, go to Manage and then in Categories.Simply put your mouse cursor on the "edit" link related to the category you want to know the ID and look on your browser's status bar: As you can see on the screenshot below, 1 is the id of the category (quicktip and image by http://www.wprecipes.com)

If you have done everything correctly it should look like this.


B 10) Adding Content (how to create gallery entry and preview imagss) - top

Posts and Pages

Writing a Post or page doesnt really differ from doing so when using other themes. You add a title, add some content, and categories and thats about it. In CleanCut you need to do a few more things:

if you want to create a blog entry:

All of this is really easy. When writing a post and scrolling down the textarea you will notice a few extra fields: Additional Post/page options and additional Gallery options. Set the additional behaviour to your likings

Setting a preview Picture
On the right border of your page you will find a field called Post Thumbnail. Once you click set thumbnail the media uploader will open and you get to upload a new image or choose an existing one. Once you have choosen dont klick the "add to post" button. Click the "set thumbnail" link instead and you are done.

Once you have added the image it should appear similar to my example:

When uploading a picture all different thumbnails needed for the theme are generated by wordpress. However this only happens if you add new pictures. if you are using pictures that were already uploaded before the CleanCut theme was activated, wordpress cannot resize them. Then the timthumb php "on the fly resizer" kicks in as a fallback. Make sure to make the cache folder writeable if you want to use older images.

You can set an image or video to override the "large version". Which means you could set an image of a snowboarder as thumbnail for example and when the user clicks that image you could show him another image in the lightbox preview, or even better, a video. Also the small previes generated on portfolio pages or at the front page may sometimes not be as you like it, you can overwrite the images here manually.

How to enter an Image/video link at the " Full Size Pic/Video Input field"
You have two options when adding a link: either manually by typing the full address (eg: http://www.yourdomain/path/to/image.jpg)
or you can press the button next to the input field. the media library will open, you can upload a new image or choose an existing one and then as if you would add an image to your post press the „add image to post“ button. The lightbox will close and instead of addint the image to the post the image url will be added to the input field.
Adding videos can get a little more tricky since you need to add a height and width for most of the video links with your url, so entering by hand is recommended here.

Some examples of valid links would be:
if adding an swf file you need to pass height and width by appending ?width=792&height=294
http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294

if adding a youtube video you dont need to pass it:
http://www.youtube.com/watch?v=qqXi8WmQ_WM

adding a vimeo video doesnt need it either:
http://vimeo.com/1084537

however if you want a size that doesnt match the default size you can pass it and the lightbox will adjust:
http://vimeo.com/1084537?width=850&height=450

more examples can be found on the homepage of the lightbox creator:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

 

Additional Headings
You can set additional headings for posts, pages and also portfolio entries. those headings get applied to the theme directly belot the menu and above the page content area.


 

SLIDESHOW ENTRIES

Slideshow entries are similar to posts, yet the do not have as many fields to fill out. they will only be shown on the frontpage, however you can set a link to any page or post if you click the image. you can also add an image or video link to open a lightbox when clicked. If you want to use the video player the way I am using it in the theme demo you need to enter the link to a .flv file. If you set a description text the slide name and this description tex will be displayed as image caption.


 

PORFOLIO ENTRIES

Portfolio entries are very similar to posts: they need a full text, an excerpt to be displayed in the portfolio overview, as well as categories ans post images. Once all of this is added and saved the post will appear on the portfolio page. Add and delete categories here as well but be aware that these categories are not shared among real "posts" and portfolio entries.

 


 

Testimonial ENTRIES

These entries appear only at your front page, 5 at a time. The options are very differentto a basic blog post but pretty self explanatory as well: Besides the basic fields like title and image you can add the name of the person you want, can set a small preview image and an optional link that gets applied to the image and the author name.

 

 

 

 


B 11) Using shortcodes - top

Using shortcodes is very easy. To use one, create a new post (or edit an existing one), and in the the editor type a shortcode in brackets, such as:

[pullquote]This is a pullquote.[/pullquote] 

to generate a pullquote. the theme comes with quite a few shortcodes that are described here:

Column Shortcodes:
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_half]Content here.[/one_half] [one_half last]Content here.[/one_half] 
[one_third]Content here.[/one_third] [one_third]Content here.[/one_third] [one_third last]Content here.[/one_third] 
[one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth last]Content[/one_fourth] 
[one_fourth]Content here.[/one_fourth] [three_fourth last]Content here.[/three_fourth]
[one_third]Content here.[/one_third] [two_third last]Content here.[/two_third]

Pullquote Shortcodes
To create neat pullquotes use the pullquote shortcode:

[pullquote]This is a left aligned pullquote.[/pullquote] 
[pullquote right]This is a right aligned pullquote.[/pullquote] 

Dropcaps Shortcodes
[dropcap1]T.[/dropcap1]his is a dropcap
[dropcap2]T.[/dropcap2]his is a dropcap
[dropcap3]T.[/dropcap3]his is a dropcap
 

Delimiter Shortcodes
Creates a horizontal ruler (hr) either with a link to the top of the page or not

[hr]
[hr top]

Toggle Content Shortcodes
The basic toggle got a title attribute to set the clickable title and the "active" keyword to create an opened toggle

[toggle title='here goes the title of the toggle' active]
		Content goes here 		
[/toggle]
[toggle title='here goes the title of the toggle']
		Content goes here 
[/toggle]
[toggle title='here goes another title of the toggle']
		Content goes here 
[/toggle]


Accordion Toggles:
Same code as before but each toggle gets the attribute "close='true"

[toggle title='here goes the title of the toggle' close='true']
		Content goes here 		
[/toggle]
[toggle title='here goes the title of the toggle' close='true']
		Content goes here 
[/toggle]
[toggle title='here goes another title of the toggle' close='true']
		Content goes here 
[/toggle]


Tabed Content Shortcodes
To create a tabbed content box you need to first use a wrapper shortcut and then a shortcut for each tab. One of the Tabs needs the keyword active"

[tab_container]
[tab title='Tab1' active]Tabcontent here[/tab]
[tab title='Tab2']Tabcontent here[/tab]
[tab title='Tab3']Tabcontent here[/tab]
[/tab_container]

Slideshow Shortcodes
To create a inline content slideshow you need to use the slideshow shortcut and add severals slides. The src attribute needs to point to the image and is mandatory, the url attribute is the link that should be oppened when the image is clicked. The AviaSlider is used to create the slides and therefore it is possible to apply a lot of transitions.

[slideshow]

[slide src='http://domain.com/medium1.jpg' url='http://www.open.this/site/in/link/']
[slide src='http://domain.com/medium1.jpg' url='http://www.open.this/image/in/lightbox.jpg']
[slide src='http://domain.com/medium1.jpg']

[/slideshow]

This would create a basic fade slider. however you can make use of several options and apply them to the openening slideshow shortcode tag:

blockslider:

[slideshow height='60' width='60' transition='slide' ]


curtain slider

[slideshow height='full' width='60' transition='drop' delay='100' ] 



Possible options:

 

 



C) HTML Structure - top

The HTML is valid xhtml 1.0 strict and comes with predefined classes for common elements needed in web design.
All templates share basic elements like header, footer, main, and entry so be carefull when editing those or adding/changing the CSS for those ids and classes :)

 


D) CSS Files and Structure - top

The CSS for the theme is split into two files: one that holds the basic markup for layout and one that contains the specific color information for the 5 different styles. The fist one (style.css) is shared among all skins, but each skin has
a separate second file for the aforementioned color information. If you want to create a unique layout just change the settings in on of the stylessheets of folder "CSS"

To change the color scheme open the html template files file and look into the html head, here you will find style1.css linked and the others as comments. just exchange the one linked with one of the files in the comments and you switched color scheme.


E) JavaScript - top

The theme uses advanced jQuery functions. You do not need to know how to use jQuery to activate them, almost everything is controlled by wordpress. All the function calls as well as as the custom created jQuery plugins like the aviaslider are located in the custom.js file.

Lightbox: prettyphoto (my_lightbox("a[rel^='prettyPhoto'], a[rel^='lightbox']");)

the lightbox gets automatically applied to links that contain images, youtube videos, vimeo videos, mov files and swf files. if you dont want to activate the lightbox on any of those links add the class 'noLightbox'. if you manually want to apply the lightbox to a link you can add the rel='lightbox' attribute to the <a> tag.

Better documentation can be found here:
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/


F) PSD Files - top

Among with the theme come all psd files needed to edit the different skins. With these psds you can even create your own unique CleanCut skin.


F) Image Sizes- top


Accordion Slider + Newslist Slider: 670px * 390px
Fadeslider, Curtainslider, Blockslider: 910px * 390px
Blog Preview pics: 610px * 260px
Small Portfolio pics: 200px * 130px


G) Sources and Credits - top


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Kriesi

Go To Table of Contents