kriesi/333648177216: Display Wordpress Theme Created: 6/12/2009 By: Kriesi For Updates Follow Me On Twitter or Facebook
kriesi/333648177216: Display Wordpress Theme Created: 6/12/2009 By: Kriesi For Updates Follow Me On Twitter or Facebook
Created: 6/12/2009
By: Kriesi
This file will teach you how to set up and use the “Display” - 3 in 1 Word-
press 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, Re-scaling)
2. Setting up the Front page (Main Menu, Item Slider, Content, Footer)
3. Setting up the Portfolio
4. Setting up the Blog
5. Setting up the Contact Form
6. Adding Content (how to create portfolio entries, preview images,
how to cut posts)
B) CSS Files
C) Javascript
D) PSD Files
E) External resources
A) INSTALLATION
(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.
Seite 2
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 re-
placed 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.
Image Resizing
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 or one pic for each frontpage entry. Otherwhise you need to
add small preview pictures for the portfolio 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.
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
Seite 3
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)“
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/
Seite 4
CUSTOM WIDGETS FOR ALL PAGES:
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
SETTING UP THE FRONT PAGE
To setup your frontpage you have to do 4 tasks:
To set up the menus create a new menus and enter the Name "First" at Menu Name. This
Menu will populate the top main menu.
Now before you add any menu items take a look at the top right of your browser window:
you will find The "Howdy admin and Logout link" Directly below you can see the "scre-
en options" tab. Click that tab and a panel with additional options will open. Check the
checkbox in "Show advanced menu properties" that says "Description"
Now set up your menus. If you add Menu Items to the "First" Menu the description will
display directly bellow the Menu Item title in your front end.
Attention: you might need to delete some pre filled descriptions if you use pages in this
menu, since wordpress adds a content excerpt automatically to those items. Just remove
that and enter a very short description of 2-7 words
Note: If you purchased this item before wordpress 3 was released and update it you can
also use the old menu manager, description bellow:
If you press the button you get a new blank menu item.
Seite 6
The first Input field shows the Name of your Item in the Menu, the second
input field is a description line that is added to your top level items. sub
level items don‘t need this. To choose a link for your menu item change the
select box ‚linking Method‘ and choose where you want to link (manually,
page or category are your options)
For example if you would like to create a link to your Home Page this could
look that way:
Changes will only be saved once you press the save button, so if you acci-
dently delete a whole tree you can simply reload the page without saving.
The Menu is always displayed at the top of the page but you can choose to
display it on Wordpress Pages as well, as a sidebar menu:
Seite 7
Setting Up the Image Slider
First click the Front Page Slider button in your admin menu.
Before adding Slides to the slider you have a few options to choose from:
Which slider do you want to use, the 3D Slider or a more basic jQuery Fad-
ing slider. (if you choose the Flash 3D Slideshow the jQuery slider will still
be used as a fallback if a user doesn‘t have flash installed on his browser)
If you have choosen the 3D SLideshow you have to ways of populating it.
You can either choose to use the slideshow manager that I will describe
soon or edit the config.xml file in your /slideshow/ folder manually.
Of course you have a few more options if you are editing the slides via xml
file directly but it is much easier and faster to use the Slideshow Manager
Tool.
Here is a really good explanation on how to use the xml file directly if you
really want to use it that way:
http://www.progressivered.com/cu3er/docs/
Also please be aware: if you have choosen the jQuery slider you can only
use the Slideshow Manager.
Last but not Least you can choose Autoplay and Autoplay Duration for the
slider
Seite 8
Now to the important Part, the Slide Manager itself:
You will notice, it looks and works very similar to the menu manager. You
create new items and can sort and delete them with the controlls on the
left. Within the image url field enter a URL to the image you want to show.
Size should be 940 * 420 px. You can now choose the transition method
for each slide:
• Number of Slices
• the Z-Axis option sets the amount of „gravity“ during the transition. the
higher it is the further the item gets pulled back during transition.
Seite 9
ALSO please note the following:
If you choose to use the xml file auto duration and autoplay option do not
apply, the must be entered into the xml file by hand as well!
If you choose to use the jQuery Slider you cant use the XML file, the
jQuery slider will always use the Slide Manager.
If you are using the 3D Slideshow you cannot link to images on other do-
mains. So if wordpress is installed at http://www.yourdomain.com/ you
need to start the image URL with exactly the same string. (if you dont use
a www on your installation make sure to exclude it as well in the image url)
The first inputs content is the welcome message bellow the slider.
The Second block lets you choose how you want to populate the 3 front-
page content boxes.
Seite 10
Here you can choose what to display in the 3 bottom columns of the main-
page. They are extremely 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 drop down 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 widgets to the appropriate widget area.
Footer Area
Seite 11
To edit your footer press open „Footer Options“
The footer setup is pretty quick and self explanatory. First you can edit the
content and Link URL of your Contact Button.
And last but not least you can enter some social accounts of yours, the
small icon links will only be displayed for those input fields that dont have
an empty value.
The 4 footer link lists can be edited within the footer widget area on your
widget page. if you don‘t have any widgets applied to this area there will be
shown 4 default list, defined in footer.php
First you can choose how many images you want to display on each page
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 choose the page in Portfolio Option with the select box.
New and a very unique feature is the option to set up as many portfolios as
you want. Just choose a new page and display the same or other catego-
ries of your choice.
Seite 13
Seite 14
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 with the Menu Manager and after
that is done open Blog settings and choose the page at the select box.
The blog Page usually displays all Categories, since sometimes you want
to exclude some of these categories (for example portfolio entries) you can
EXCLUDE multiple categories here:
You can also exclude those categories from the Category listings in your
sidebar and footer:
Seite 15
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 with the Menu Manager and after
that is done open Contact Page settings and choose the page at the select
box.
Afterwards choose which email adress the mails of the contact form should
be sent to:
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 proto-
col. (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.
Seite 16
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 main-page
content boxes and the portfolio might need some introduction:
When heading over to a post or page you will notice the “Display” option
panel below the text area:
The Images you enter here are the preview Images for your posts, pages
and portfolio Items.
Seite 17
Basically you have the choice to enter up to 3 Preview items:
The first one with size 280px * 124px is used for the portfolio/front page
preview:
The Second one with size 610px * 273px is used for the Blog Overview
and Single Post/Page view:
The 3rd one is used for the Lightbox effect when you click on one of these
Pictures. The Small and Medium input fields in your backend may only
contain Images, hoever, the full size input field may also contain videos.
Seite 18
If you turned image scaling on it can get a little tricky logic wise:
• If image scaling is activated you can enter images of any image size into
any input field, they will be scaled to the correct dimension.
• If you don‘t add a small or medium image, and only choose to enter the
big version, then a scaled down version of this image will be used to dis-
play portfolio overview or Blog Overview and Single Post/Page preview
Pictures.
• However whenever you enter a image into the small or medium input it
will overwrite the big version when displaying a small or medium picture.
• If you choose to display a Video within your lightbox add the video Link
instead of the image url into the appropriate (the 3rd) input field. You then
have to enter at least a medium sized preview pic as well. Since word-
press cant extract a screenshot form the video file, you need to set one
manually.
• if you choose not to enter an image/video into the 3rd input field there
wont be a lightbox effect, instead the image will link to the single post/
page.
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 enxt to each 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“ but-
ton. 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.
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/d
esign.swf?width=792&height=294
Seite 19
if adding a youtube video you dont need to pass it:
http://www.youtube.com/watch?v=qqXi8WmQ_WM
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=792&height=294
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-cl
one/
Seite 20
ADDING CONTENT FAQ:
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
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 3 “Display” 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 fallback image
transition animation, as well as the dropdown menu and the ajax contact
form.
Seite 21
The prettyPhoto lightbox comes with 4 styles. each link that has the atr-
rubute rel="lightbox" or
rel="prettyPhoto" will trigger that lightbox.
to choose different styles change the parameter in the function call
The lightbox is capable of displaying images as well as movies and flash
files. Documentation can
be found here:
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-cl
one/
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 35 and remove function calls in custom.js in your /js/ folder.
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 “Display” skin.
E) EXTERNAL RESOURCES
Thats it, once again, thank you so much for purchasing this theme, have
fun using it.
Cheers Kriesi
Seite 23