Replete WordPress Theme” Documentation by “Kriesi” v1.0


“Replete WordPress Theme”

Created: 26/11/2012
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 at the support forum at http://www.kriesi.at/support/.

This file will teach you how to set up and use the “Replete” 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. Before you start
  3. Installation
    1. Setting up the Theme Options
    2. Setting up Styling
    3. Setting up layout & settings
    4. Setting up your Footer
    5. Setting up the general Portfolio options
    6. Setting up the Contact form
    7. Setting up the Sidebar
    8. Setting up the Menus and Mega Menus on your site
    9. Using custom Widgets
    10. Adding Blog, Page and Portfolio (how to create entries and use preview images)
    11. The power of shortcodes
    12. Building your own dynamic Templates
    13. Woocommerce Documentation
  4. HTML Structure
  5. CSS Files and Structure
  6. JavaScript
  7. PSD Files
  8. Image Sizes
  9. Sources and Credits

Folder Structure of Replete and the Avia Framework - top

The Theme is built with WordPress best practices in mind, therefore it makes heavy use of the WordPress template engine. What exactly does that mean?

Whenever you see a php function call like this within your php files (get_template_part(), get_header(), get_footer() or get_sidebar() ) the theme retrieves a reusable code snippet, most of the time a chunk of code that is used in many different files.

Apart from the php structure the theme uses a lot of modern CSS3 features, most notably the power of media queries to serve different layouts for different viewport sizes. If you use a modern browser (IE9 +, Chrome, Safari, Firefox) and resize your browser window you will realize that the theme adapts its size to the viewport.

Folder structure:

 

Before you start

You might want to check out the demo video page: We will update the site from time to time and add new videos on how to use the theme.


Installation - top


You can either choose to upload the theme to your server via ftp (only upload the unzipped folder „Replete“ 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 “Replete” folder and not the whole archive file that you received by themeforest. Here is a short demo video on how its done

Notice: if you are new to WordPress and have problems installing it you might want to check out this link: Solving broken theme issues
After that is done activate the theme as you would activate any other theme at Appearance->Themes.

If you are new to WordPress and have problems with setting up the theme you might want to import the dummy content file that comes with the theme. You can import this file by clicking the "Import dummy data" Button of the Replete Theme options. The theme will then import some dummy posts and pages from the live preview. However you will still need to set some options on your own, like which page should serve as front page or how menus should be displayed. A quick demonstration video can be found here. (its really more a demonstration than a tutorial but it might be helpfull nevertheless. the video was recorded using the Brigtbox Theme but the options are the same for Replete since the themes share a framework)

Shop functionallity

To enable the ecommerce part of the theme download the woocommerce plugin here, then install and actiavte it like any other plugin. If you want to see how its done and how you can set up some products take a look at the screencast here. (video shows a different theme but it works the same with Replete)

You can read the full documentation here: Woocommerce Documentation

Forum functionallity

To enable the forum functionaliy download the forum here, then install and actiavte it like any other plugin.


Setting up the Theme Options - top

If you want to change the general Options of the Theme open the “Replete” Theme Options Panel (located in your admin sidebar) and click it, you will notice several tabs with options, which we will discuss now one by one.

Front page & Blog page
First of all you have to choose which content your front page should contain. You can either choose to display a page of your choice, or if you dont select a page the blog will be displayed. If you choose to select a page you can then pick another page that will display your blog instead of the default page content. If you want to make the front page look like the one in the theme demo make sure you select a page and then create a unqiue dynamic page template.

Logo
Next you can choose to upload your own logo. Make sure that the logo has the correct dimensions. If you need to embed a logo of different size you might need to edit the CSS files directly. We will talk about CSS best practices for the theme in a second after we talked about the last input field on the Theme Options page:

Google Analytics Tracking Code
Enter your Google analytics tracking Code here. It will automatically be added to the themes footer so google can track your visitors behaviour.

 

Social Media Inputs
If you add your twitter account name, dribble accoutn name or the link to your Facebook page or profile a social icon will be displayed at the top of your page and at the footer for either of them. As for your worpdress feed: if you dont add anything to the url the default RSS feed will be applied automatically. If you got a feedburner RSS adress you can also enter it here. For example: http://feeds.feedburner.com/kriesi

 

Top Banner Message
The banner message allows you to notify visitors of your site when something new has happened. If a visitor clicks the banner away it will no longer appear for that visitor until you change the message.


Setting up Styling - top

Theme Colors:
With only a few different color inputs you can easily create new layouts in seconds. You just need to select a primary color for your links and as background color for footer and some other elements, as well as a font color for text placed on those elements.

As you can see the theme generates the color scheme on the fly: In this example we have choosen a dark blue background and white text on that blue background. The white gets applied to the heading and for the text the theme generates a slightly "darker" by adding a little of the blue background.

The theme comes with 21 predefined color schemes that can be used out of the box or modified if needed

Stretched or boxed layout
The stretched layout expands from the left side of the viewport to the right. The boxed layout will create a box around your content area that is approx. 1000px wide.

Heading Fonts
You can choose several fonts that will add a unique feeling to your site. The fonts you can choose are a selection of some of the google free web font archive and applied via css fontface.

Quick CSS
If you want to do minor changes to the css you can enter them here and they will be added to the css. If you want to do major changes we recommend you to use the custom.css file.


Setting up Layout & settings top

 

Default Blog Layout: The layout you choose here will be applied as the default blog layout. This means that by default all blog overview pages, blog entries and archives will use this style. You can overwrite this setting for each post entry individually. When using the template manager you can also create seperate blogs that use another layout.

Default page Layout: The layout you choose here will be applied as the default for all pages. You can overwrite this setting for each page entry individually. When using the template manager you can also create pages that differ from any of those layouts.

Page Sidebar navigation: By default the theme creates a sidebar navigation if you are currently viewing a page that has any childs or siblings nested. You can deactivate those sidebars here if you dont want them displayed. If you choose to display them you can chane the order of the page items by changing their "page order" in the page edit screen.

Slideshow behavior on overview pages: This settings affects post, age and portfolio entries which have more than one preview image applied. The default setting is: overview pages (eg Blog, Portfolio Overview) display the whole slideshow for each post.You can change this so that overview pages always only display a single image. Only single entries will then show the whole slideshow.


Setting up your footer top

To set up your footer you need to select how many columns it should be displayed. Once that is done head over to the themes widget page (appearance-> widgets) and add widgets to the footer widget areas displayed here. The default widgets that are displayed in your footer will be removed once you apply any other widgets :)

 

 


Setting up the general Portfolio options- top

The first task when setting up your portfolio is to set the URI scheme for your portfolio single entries. The default is set to "portfolio" so for example if you create a new portfolio entry that should show your latest artwork WordPress will display the url as http://yourDomain.com/portfolio/latest-artwork.

It is quite important to understand that you need to take care that the slug entered here does not interfere with other category slugs, otherwise WordPress will not be able to find your portfolio entries and simply display a 404 page. Sounds probably a little complicated but as a rule of thumb, if you just make sure that you got no post-category or page with the same name as the slug set here, no problems should occur.

Creating a portfolio page
Creating a portfolio page requires several steps. First of all you need to create a few single entries that contain whatever you want to show to the world :) This is easily done by clicking the "Portfolio Items" link in your admin sidebar and start creating new entries just as you would create new blog posts. Add Images, add categories and if you are done return to the Replete->Portfolio settings.

Now you need to set the two most important options:
First of all which portfolio posts do you want to show on your portfolio page? SImply select the categories that hold the posts in the select box.
Then we need a page to display those items. Select this page from the dropdown menu and you are done. If you no save the options and head over to this page it should act as an overview page for your portfolio. The default page content wil be shown in the small sidebar beside your portfolio entries.

Once that is done choose which kind of portfolio you want to display:

You can select 1, colum, 2,3 and 4 column porfolios, as well of some variations with sidebars. You can also select how many portfolio entries to display on your portfolio page and if you want to show the portfolio excpert and the pagination

Not visible in this screen is the sorting option which also can be hidden.

By clicking the [+] and [-] icons at the bottom right of the page you can create an unlimited amount of portfolio pages that contain different workpieces, based on the categories you select.


Setting up the Contact form - top

Setting up contact form is a rather quick task: just select the page that should display the contact form and also select the email address that should receive the mails.

You can also set an autoresponder that wil be sent to the user once he has sent you a message. You can edit the existing contact form to your likings but it is recommended to at least keep the name, email and subject field.


Setting up the Sidebar - 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 stores widgets by name, it stores this information by number. So if I would add a text widget to Contact (widgetarea Nr6 in the screenshot), and then delete the Contact widget area, the widgets would then be in Jobs. (previously in 7, now the new 6)


Setting up the Menus on your site - top

The Theme improves the WordPress 3.0 menu items with a few additional options that make it possible to create subheadings for the main menu items. To do this just enter some text into the menus description field. If you have problems pulling that off: here is a short demonstration on how its done (Replete theme, works the same way in Replete)

The theme offers 2 menu locations: the Main menu location beside your logo and a very small submenu location at the top of your page, right above your logo. Once you have created a menu you then have to select where to display it. Please keep in mind that the small menu location above your logo doesnt support dropdown menus or mega menus.

You can also create additional menus and display them within your sidebar by adding the menu widget to one of your sidebars


Using custom Widgets - top

The Theme comes with several custom widgets that let you display latest blog posts, latest portfolio entries or your latest tweets either in your sidebar or if used in conjunction with shortcodes also within your content area. It also has a combo widget with 4 tabs taht includes latest comments, latest entries, most popular entries and post tags, as well as an advertising widget, and a social media count widget.

The options are pretty much self explaining, the widgets are named "Replete Latest News", "Replete Latest Portfolio" and "Replete Twitter Widget"

The only widget which might need a little bit of explanation is the social media count widget: it displays the number of twitter follower as well as the number of your rss feed subscribers in the sidebar. The feed subscribers can only be shown if you enter a valid feedburner feed url (this will not work with your default wordpress feed url) Also make sure that the awarness API of your feedburner account is active, otherwise your wordpress installation will not be able to access your feed data.

 


Adding Content (how to create gallery entry and preview images) - - top

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

If you want to create a blog or page entry you got the possibility to add either a single featured image or multiple images that get converted to a slideshow.

When writing the post, scroll down; bellow the text-area you will notice a few extra fields: First you can choose which slideshow type you want to use and if autorotation for this post should be active. Once that is done you can add one or multiple Images and also set diffferent settings for each slide depending on which slideshow you have chosen.

First of all just click the upload button and add upload your image to your web-server. Click the "Add to slideshow" button and a thumbnail will be inserted. You then can add a caption title and a caption text if you want to. More advanced users can also set the caption position, color and styling. When uploading a picture all different thumbnail sizes 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 Replete theme was activated, WordPress cannot resize them. Keep that in mind when working with images that were uploaded before the theme was active :)

If you have selected the adaptavia slider instead of the fade or moving slider you can also set the slideshow transition for each slide.

Using Video:
When working with the image slider you can also choose to display video content instead of images. this works very similar.
FIrst hit the add external video by URL button. Enter the url to the video service that hosts the video. A service like vimeo or youtube for example.
A list of all supported Video Services can be found here 

Once that is done press the "insert Video" button and the video will be embeded in the slideshow. If you want to display a poster image for the video simply click the blank film reel that you can see on default when adding a video.

Using Post Formats

Post Formats is a theme feature introduced with Version 3.1. A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. The theme supports 4 different formats. The standard format is for deault blog entries. The link format is for linked entries to external sites. If you select the link format make sure that your post has a title and that the first line in the content textarea is a link.

If you select "Quote" the post title will be transformed to a bold quote. The gallery post type doesn't really differ from the standard post type. The only difference is that image in standard format are cropped so they always have the exact same height and width which is not the case with galleries.


Using shortcodes - top

What is a shortcode and how do i use it?
Shortcodes are small text snippets that get converted by WordPress. As an example:

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:

[quote]This is a pull-quote.[/quote] 

to generate a pull-quote. Other example would be the use of shortcodes to create columns within your post:

[one_half first]Content here.[/one_half] [one_half]Content here.[/one_half] 
[one_third first]Content here.[/one_third] [one_third]Content here.[/one_third] [one_third]Content here.[/one_third] 
[one_fourth first]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] 
[one_fourth first]Content here.[/one_fourth] [three_fourth]Content here.[/three_fourth]
[one_third first]Content here.[/one_third] [two_third]Content here.[/two_third]

The theme comes with quite a few shortcodes that are easily accessible thanks to a visual self-explanatory user interface that is accessible by clicking the magic wand button when you write a post

Most shortcodes require you to enter additional information and then get generated by the theme on its own, starting from columns to content slider. You can also choose to nest various shortcodes. For example create 3 columns, and within each of them display a small slideshow. Or do it the other way round: create a single slideshow that slides multiple columns. The sky is the limit :)

DEMO VIDEO

Attention: Please make sure to always start new shortcodes on new lines. Most of the time you wont encounter any errors if you don't do that but unfortunately WordPress does mess up the html sometimes. This is true for all shortcodes but the inline ones like drop-caps buttons and icon links, those are the only ones that don't need a new paragraph.

In case you encounter odd behavior always make sure that all shortcodes are closed as expected. Also when trying to nest shortcodes please be aware that you cant wrap a shortcode with the same name around another one with that name: For example: [one_third first] [one_third first]Content here.[/one_third] [/one_third] would result in messed up html code since WordPress is not able to identify which opening tag belongs to which close tag. However what you can do is nest shortcodes within each other if they don't share a name. for example you could easily place a slideshow within a 3rd column tag. Just make sure to add new paragraphs between them ;)

Icon Box shortcodes: The theme comes with iconbox shortocdes (see at the bottom of this page). The Icons used are from the iconset "Iconsweets2" which has a lot more icons then we used. if you want to add some of them, or any other just upload your icons to the image/icons/iconbox/ folder. Once that is done, they will appear in the dropdown box of the visual shortcode generator if you create a new iconbox


Building your own dynamic Templates - top

Probably the best way to create stunning and complex pages is the Wordpress Template Builder that comes with the theme. Allthough you can of course choose to edit template files the old fashioned way, (by editing them in your HTML editor of choice) the dynamic template generator is a much more flexible solution. So how does that editor work? Before reading the how to you might want to check this short demo video which already describes a little how it is done.

 

First of all open the editor at Replete-> Template Builder. You then get asked to enter a name for your new dynamic template. Do so by entering one without any special characters and at least 3 chars long. Hit the "Create Template" button and a blank default template is created.

 

It doesnt contain any elements yet but we will add some in a second, first lets apply the template to a post, page or portfolio entry of your choice. Simply open the entry you want the template to be applied to and look out for the "Page or Post Layout" Sidebar. Here you need to overwrite the default layout with the option "dynamic template" Then can now select the template you have just created.

Once selected save the entry. If you look at it in the frontend now it should simply display a blank content area.

To change that we need to start elements to the dynamic template. So head back to the new Dynamic Template you just created and start adding elements. Once an element is added you can easily change the position via drag and drop. To make it as easy as possible we tried to reduce the elements available to the absolute necessary minmum. We ended up with7 "modules":

Horizontal Ruler
adds a horizontal ruler to the page to seperate content. Choose between several styles to fit your needs

Simple Text area
adds text to your page. This module is most often used to create a nice looking quote but you can also jsut fill in any html or even shortcodes to displaywhatever content you want. It is also used to create a callout section with buttons

Slideshow
adds the slideshow of the entry the template gets applied to. This way if you apply the template to different posts and pages it will still display the featured images of each individual entry. Uses the slideshow settings defined in the post or page.

Post/Page Content
This module behaves similar to the slidehsow: it will by default output the content of the entry the template got applied to. You can also choose to display a different post or page. If you choose to display a different post or page the content of that entry will be displayed instead. If the entry you have choosen is cut by the wordpress "read more" tag the module will output only the part before the read more tag and add a read more button.

Blog
adds a blog with sidebar to the template. You can choose which categories should be displayed, as well as how many entries and if a pagination should be displayed as well.

Portfolio
adds a portfolio to your page. You got the same options as in your portfolio section, only with the advantage that you can combine this portfolio with other modules to create unique portfolio pages.

Columns
adds one row with either 2,3 or 4Columns to the Page. You can choose the width for each column as well as the content. The available options are:

Page: add page content of a single page
Post: add the latest post from a category. if you choose the same category a second, third, fourth or fifth time in another column the offset will be generated automatically so that you dont display the same post twice
Widget: Enter the name of a widget. the widget can then be used at appearance > widgets. Please be carefull when deleting widgets since the contents of a widget is stored by widget number and not by name. You can read more about it here.
Text:Add some text. html and wordpress shortcodes are allowed.

Attention: Since the Template Manager makes heavy use of Javascript it is recommended to use a modern browser, like IE9+, Firefox4+, Safari or Chrome. It will still work with older browsers but you will notice dropping performance if you add many templates.


HTML Structure - top

The Theme uses valid HTML 5 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 :)


CSS Files and Structure - top

The CSS for the theme is split into various files: one that holds the basic markup for layout which is called style.css. We then got one file for the light and the dark sin in your css folder, as well as a shortcode css file. Last but not least we got an empty custom.css file which should be used by you to add your own modifications. Since we never touch the custom.css file when making updates you can easily update to later theme versions without beeing in danger of loosing stylesheet modifications.


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 slideshows are located in the avia.js file.

Lightbox: a custom pretty photo skin

the lightbox gets automatically applied to links that contain images, youtube videos, vimeo videos, mov files and swf files. if you don't 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/


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 Replete skin.


Image Sizes- top

This is the image array used in functions.php to tell wordpress which image sizes to use. The preview images for dynamic templates at the bottom can be delted if you dont want to use dynamic template files of that size. that will save some performance while uploading and also some webspace on your server.


$avia_config['imgSize']['widget'] = array('width'=>36, 'height'=>36 ); // small preview pics eg sidebar news
$avia_config['imgSize']['post-format-image'] = array('width'=>630, 'height'=>999, 'crop'=>false); // big images for post format image and gallery posts
$avia_config['imgSize']['fullsize'] = array('width'=>930, 'height'=>930, 'crop'=>false); // big images for lightbox and portfolio single entries
$avia_config['imgSize']['featured'] = array('width'=>930, 'height'=>340); // images for fullsize pages and fullsize slider
$avia_config['imgSize']['portfolio'] = array('width'=>450, 'height'=>335); // images for portfolio entries (2,3,4 column)

//dynamic columns
$avia_config['imgSize']['dynamic_1'] = array('width'=>446, 'height'=>151); // images for 2/4 (aka 1/2) dynamic portfolio columns when using 3 columns
$avia_config['imgSize']['dynamic_2'] = array('width'=>609, 'height'=>210); // images for 2/3 dynamic portfolio columns
$avia_config['imgSize']['dynamic_3'] = array('width'=>688, 'height'=>151); // images for 3/4 dynamic portfolio columns

you can change these settings in functions.php. the theme will then create different thumbnail sizes according to your changes on upload. You might need to reflect those changes within your CSS file, depending on what you have changed ;)


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