Twicet WORDPRESS THEME

Created: 12/06/2009
By: Kriesi

HELLO THERE, FIRST OF ALL THANKS FOR PURCHASING

THIS THEME!

This file will teach you how to set up and use the Twicet - 5 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 ex-
plore 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.

--TABLE OF CONTENTS--

A) Installation
1. Setting up the general Options (Skin, Rescaling, Main Menu)
2. Setting up the Frontpage
3. Setting up the Portfolio
4. Setting up the Blog
5. Setting up the Contact Form
6. Adding Content (how to create portfolio entries, frontpage slides,
how to cut posts)

B) CSS Files
C) Javascript
D) PSD Files

 A) INSTALLATION

The Theme comes with 5 different styles

which can be activated at your wordpress
admin panel. First activate the theme as you
would activate any other theme at
Appearance->Themes.

Twicet Light/Grey is now the active theme.

SETTING UP THE GENERAL OPTIONS

If you want to change this go to the Twicet 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:

Next step is to decide whether you want to use automatic image resizing or
not. If this option is activated you only need to upload one pic for each
portfolio entry and only one pic for each frontpage entry. Otherwhise you
need to add small preview pictures as well.

If you do want to use the image resizing script you need a server with php5
and GD-Library installed (a module for image operations)

If you dont know what this means never mind, most servers come with this
preinstalled.

Seite 2
If GD library is installed and the cache folder is writeable you will see this
options to choose from:

If the GD library is not installed you will see an error message, as well as if
the cache folder is not writeable. If you want to use the script for automatic
image resizing you have to do another thing after setup: you have to set
the permissions of the folder „cache“ in your theme folder to write able
(777).

This is only necessary if you want to use the image 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)“

Seite 3
If you need support for the resizing script which is called timthumb you can
take a look here:

http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

SETTING UP THE MENU

To setup the menu you just have to enter the ids of the pages you want to
include or exclude into this input field:

for example:
include=9,16,22,24,33
(this would display 5 menu items for the pages with the id 9, 16, 22, 24, 33)

you can add different information to the query string like page order; to see
your available options check out:

http://codex.wordpress.org/Template_Tags/wp_list_pages

If this field is left empty it will display all pages you have created.

If you want to know the ID of a page hover over the page name at the edit
pages site, at the bottom you will see a link, the last number is the id

Seite 4
To create a dropdown menu you just have to set a page to the parrent
page of another at the write page panel.

Last thing on the general options page to do is to add your google analyt-
ics code if you want to. Just add the code to the textarea and google will
start tracking ;)

Seite 5
E) SETTING UP THE FRONT PAGE
1)MAINPAGE IMAGE SLIDER.
If you choose to only display one image no transition will be displayed.

To add images to the slider you have to first choose a post category that
holds the different posts with these images. after creating those you can
choose as many as you like at the Twicet Options Page.

You can also choose how many items should be displayed.

You can choose if the slider area should autorotate and how much time
should elapse between each transition.

Seite 6
2)MAINPAGE NEWSTICKER

These options control the newsticker at the bottom left of the big image
area. You can choose if you want to display the ticker, which categories
should be displayed and how much time should elapse between each
transition.

Seite 7
3)MAINPAGE BOTTOM CONTENT
Here you can choose what to display in the 3 bottom columns of the main-
page. They are extremly flexible, you can decide to edit just the html in the
index.php file or change the content dynamically either via Posts, Pages or
Widgets.

If you choose page an additional dropdown field appears and lets you
choose a page.

If you choose Post you can select the category of the post in addition,

If you choose Widget go to the widgets page after saving your settings
and add wdgets to the appropriate widget area.

Seite 8
SETTING UP THE PORTFOLIO
At the options page just choose which page should display your portfolio.

Best practice is to first create a blank page with the name of your choice,
then add that page to your main menu and after that is done choose the
page in your dropdown menu.

After that is done choose Categories which should be used to populate

your portfolio page, and also choose how many items you want to display
per page

Last thing to do is to choose how you want to populate the portfolio footer:

This works just like in: 3)MAINPAGE BOTTOM CONTENT

Seite 9
SETTING UP THE BLOG
At the options page just choose which page should display your blog.

Best practice is to first create a blank page with the name of your choice,
then add that page to your main menu and after that is done choose the
page in your dropdown menu.

The blog Page usually displays all Categorys, since sometimes you want
to exclude some of these categories (for example porfolio entries) you can
EXCLUDE multiple categories here:

Seite 10
SETTING UP THE CONTACT FORM
At the options page just choose which page should display your portfolio.

Best practice is to first create a blank page with the name of your choice,
then add that page to your main menu and after that is done choose the
page in your dropdown menu.

Afterwards choose which email adress the mails of the contact form should
be sent to:

Seite 11
ADDING CONTENT

If you completed the previous steps you are now ready to fill your site with
content. this works just normal for posts and pages, only the mainpage i-
mage slider and the portfolio might need some introduction:

When heading over to a post or page you will notice the twicet option panel
below the textarea:

When adding a post or page you

can now also define a punchline,
thats the small text above the title

When creating a post for your frontpage upload an image of your choice
and enter the FULL url of the image into the appropriate Box
(eg:http://www.yourdomain/wp-content/uploads/yourimage1.jpg)

This image should be 350px in heigt and max 950px in width.

Seite 12
950px would be a full size image just like the one that is displayed at the
themeforest preview. if you want the image displayed that way also mark
the checkbox „Only display Image“.

otherwise you will see the post excerpt that overlaps with the image.

the image is always aligned at the right top of the area, so if you want to
add an image similar to the 2nd or 3rd slide of the themeforest preview just
enter a smaller image (for example 350 x 350px)

When creating a portfolio entry its the same approach: just enter a thumb-
nail and a bigger version of your images (if image resizing is turned on you
just have to enter a big version)

When creating portfolio entries make

sure to fill in an excerpt, this will be
displayed below the portfolio entry

Another thing that gets asked pretty often: HOW to CUT POSTS AND
SHOW THE MORE BUTTON:

To display the „more“ button you have to manually cut posts or pages into
two parts, this is done with the read more button in Wordpress

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

C) JAVASCRIPT
The theme uses advanced jQuery functions to create the image transition
animation, as well as the newsticker, the dropdown menu and the ajax
contact form.

An external javascript plugin for the lightbox was used as well:

Prettyphoto

http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-cl
one/

To activate the lightbox on a link add the rel=“lightbox“ or rel=“prettyPhoto“

to the link.

example:
<a href=“/yourimage_big.jpg“ rel=“ prettyPhoto“>
<img src=“/yourimage_small.jpg“ />
</a>

The theme offers some modification options at the options page for your
javascript, especially for the image slider, so you shouldn‘t need to edit the
custom.js file.

However if you want to remove some javascript functionality you can edit
the lines 3 to 20 and remove function calls.

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

Thats it, once again, thank you so much for purchasing this theme, have
fun using it.

Cheers Kriesi
Seite 14