Version: 1.4 – Latest Update: Jun 16, 2014
This documentation will guide you through the installation process and illustrate how to use/customize this theme.
If you are new to WordPress the official WordPress Codex, WordPress Forums are a good place to start. Often a quick Google search is all it takes to find an answer to your question. For any theme related question beyond the scope of this documentation don’t hesitate and head over to the support center.
Make sure you have the latest version of WordPress up and running before you proceed and install the theme: http://codex.wordpress.org/Installing_WordPress
- via WordPress: Go to Appearance, click “Add New”. At the top of the page click “Upload”. Browse and select “realty.zip” than press “Install Now”. Once the theme has been uploaded you will see a “Theme installed successfully.” message. Now click “Activate”.
- via FTP: Open your FTP application and upload the unzipped “realty” folder to “wp-content/themes/”. Once uploaded, login to WordPress and go to Appearance > Themes and click the “Activate” button on the Realty screenshot.
For a seamless experience go to Settings > Permalinks, select “post name” and click “Save Changes”.
Required: Worx Shortcodes
Worx comes with dozens of shortcodes that will help you to add all kinds of layouts and features to your site without writing any actual code. This is especially helpful for those who don’t know any HTML & CSS, but want to built advanced layouts as shown in the demo. The theme is fully functional without this plugin, except for the use of Twitter.
You will see the following notfication in your WordPress admin panel:
Click “Begin installing plugin”.
In case you already dismissed this notification, go to Appearance > Install Plugins. Hover over the plugin name and click “Install”.
Next click “Return to Required Plugins Installer” as shown on screenshow below:
Finally hover over the plugin name and click “Activate” as shown on screenshow below:
With this the Worx Shortcodes Plugin is ready for use.
How To Use Shortcodes
To insert shortcodes into posts and pages you will find the Worx shortcode icon in the texteditor (Visual Mode) when editing posts and pages. Click this icon a dropdown menu with all available shortcodes expands.
Reuiqred: Contact Form 7 Plugin
To add a contact form anywhere on your site, install and activate this plugin as you did with the Worx Shortcode Plugin above.
After you have installed and activated Contact Form 7 you will see a new menu item named “Contact” on the left-hand side of your WordPress admin area.
To learn how to add contact forms to your site read: Contact Section
Demo Content Import
This step is optional, but highly recommended, as it will help you understand how all the parts of the theme play together. You can build upon the demo content or simply copy-and-paste what what you need, and delete the demo files.
Go to Tools > Import. Click on “WordPress”. If you haven’t already installed the importer you will see a popup. Click on “Install Now”. After a few seconds the installation is done. Click on “Activate Plugin & Run Importer”.
To upload the demo content browse and select the demo XML file called “worx_wp_demo_content.xml”. Click on “Upload File and Import”.
You can now either 1. import the author from the demo content, 2. create a new user or 3. assign posts to an existing user. To keep it simple use option 3 and assign the imported posts to an existing user.
To import the demo images check “Download and Import File attachments”. In this case the download will take some time. Once done your site is filled with the demo content. Some of the demo images, such as the parallax background images and team member images are stock images and can’t be imported.
Setup Front & Blog Page
If you have done the import of the demo content you can skip the creating Front Page and Blog Page section and go straight to Assigning Front Page (and Blog Page).
The Front Page consists of all sections, such as “Home”, “About”, “Portfolio”, “Contact”, “Parallax” and whatever custom sections you are going to create.
Creating the Front Page
Go to Pages > Add New. Give this new page a title of “Frontpage” or whatever you find appropriate. On the right hand side under Page Attributes > Template select “Frontpage” and hit “Publish”. We don’t add any content here.
Creating the Blog Page (optional)
If you don’t need a blog, you can skip this step. Otherwise read on.
Go to Pages > Add New. Give this new page a title of “Blog” or whatever you find appropriate.
Select a blog template. On the right hand side under “Page Attributes” you have to choose between the following three blog templates:
Creates a blog index page with all blog posts in chronological order, starting with the newest post. Sidebar can be toggled on / off under Appearance > Theme Options > Blog.
Blog – Masonry:
Creates a blog index page in masonry layout. Sidebar can be toggled on / off under Appearance > Theme Options > Blog.
Blog – Masonry Fullwidth:
Creates a blog index page in a masonry layout in full width. Without any sidebar.
Now scroll down to “Section Settings” and uncheck “Add this Page to the Frontpage”. As we want to open the blog as a seperate page.
On the right-hand side you can set a “Featured Image” for your blog, which will show as a background image behind the blog title. If not, the blog title will use the standard section heading style.
Than hit “Publish”. We don’t add any content here.
Assigning Front Page (and Blog Page)
Go to Settings > Reading and select “A static page (select below)”. For “Front page” select “Frontpage”.
For “Posts page” select “Blog”, but ONLY if you have selected the “Default Template” before. When using the “Blog – Masonry” or “Blog – Masonry Fullwidth” template, don’t select anything for “Posts pages”. Otherwise the masonry layout won’t take effect. Than hit “Save Changes”.
With this your frontpage and Blog Index is created and ready to go.
Create Front Page Sections
As Worx is a One Page Parallax Portfolio Theme the frontpage consists of multiple sections. There are different types of sections with a couple of settings, which we will cover next.
To create a new section we have to create a new page. Go to Pages > Add New. When creating or editing a page, scroll down and you will see the “Section Settings”:
These are the settings:
- Add this Page to the Frontpage: When checked this page becomes a section of your frontpage. Unchecked it will open as a separate page.
- Hide Menu Link: When checked no link to your section will appear in the menu. (Note: This option has no effect on a parallax sections, as they are always hidden in the menu.)
- Alternate Page Title: By default the page title is your section title. When filled out, the alternative page title will be used.
- Page Subtitle: When filled out, a page subtitle will be shown underneath the page title.
- Background Color: Set background color of this page. (New v1.4)
- Set this page to: This is where you select the section type. You can choose between Home, Parallax, Portfolio, Contact and Latest Posts.
The Home Section is intended to be the first section of your frontpage, but you can arrange the sections in the order of your choice.
Home Section supports three background features:
- Fullscreen Background Image
- Fullscreen Background Slideshow
- Fullscreen Background Video (YouTube)
First we have to create a new page. Go to Pages > Add New. Give this new page a title of “Home” or whatever you find appropriate. You don’t have to add any content here.
A Note On Adding Content
This theme comes with dozens of so called Shortcodes that allow you to insert preformatted blocks of content, without writing any actual code.
In the texteditor (Visual Mode) you’ll find this icon:
Click the icon and select the shortcode you want to insert.
For more information on shortcodes read: Part IV: Shortcodes
Scroll down to “Section Settings”. Under “Set this page to” select “Home Section”.
Make sure that you have selected “Default Template” on the right-hand side under “Page Attributes”. Than hit “Publish”.
To learn how to customize your Home Section read: Customizing the Home Section.
To create a Normal / Default Section go to Pages > Add New and give it a title of your choice. Scroll down to “Section Settings”. Under “Set this page to” keep the default option, which is “Select a Section”. “Add this Page to Frontpage” has to be checked, which it is by default. How to customize the remaining settings should be clear from the Section Settings chapter above.
Add your content and hit “Publish”.
To create a Parallax Section go to Pages > Add New and give it a title of your choice. Scroll down to “Section Settings”. Under “Set this page to” select “Parallax Section”.
To set a background image click “Set featured image” under “Featured Image” on the right-hand side of your screen.
Add your content and hit “Publish”.
To create a Team Section go to Pages > Add New and give it a title of your choice. Scroll down to “Section Settings”. Under “Set this page to” select “Team Section”.
After selecting the Team Section the “Team Members per Row” menu will fade in. By default it is set to “3”. Which means that your Team Section will show three team members per row, as you can see in the online demo.
New v1.4: Under “Position of Name & Title” you can choose your team section layout (Overlay, Underneath or Next to Photo).
Select the number of team members you want to show per row, the layout style and hit “Publish”. You don’t have to add any content here.
To learn how to add team members to your Team Section read: Team Members Setup
To create a Portfolio Section go to Pages > Add New and give it a title of your choice. Scroll down to “Section Settings”. Under “Set this page to” select “Portfolio Section” and hit “Publish”. You don’t have to add any content here.
To learn how to add projects to your Portfolio Section read: Portfolio Setup
To turn the portfolio filter on/off go to Appearance > Theme Options > Portfolio.
To create a Contact Section go to Pages > Add New and give it a title of your choice. Scroll down to “Section Settings”. Under “Set this page to” select “Contact Section” and hit “Publish”. You don’t have to add any content here, other than a contact form.
To learn how to create and add contact forms to your site read: Contact Form Setup
There are plenty of options on how to customize your Contact Section. There for go to Appearance > Theme Options > Contact Section.
Latest Posts Section
To create a Contact Section go to Pages > Add New and give it a title of your choice. Scroll down to “Section Settings”. Under “Set this page to” select “Latest Posts Section” and hit “Publish”. This will display your three latest blog posts. You don’t have to add any content here.
To create a separate page that is not part of the frontpage go to Pages > Add New and give it a title of your choice. Scroll down to “Section Settings” and uncheck the “Add this Page to the Frontpage” option, which is enabled by default. Add your content and hit “Publish”.
Once you’ve created all your Frontpage Sections its tme to arrange their order. Which we will cover next.
Usage & Customization
Customizing the Home Section
Go to Appearance > Theme Options > Home Section.
The Home Section comes in three different background features. All of them are fullscreen.
Fullscreen Background Image
This is the default background feature. Click on “Upload” and select the image that you want to use as the home section background:
Fullscreen Background Slideshow
To create a fullscreen background slideshow go to Appearance > Theme Options > Home Section. Under “Home Section: Background Feature” select “Fullscreen Slideshow”.
Click “Upload” to select the background image for that slide. Enter the slide content in the textarea, which accepts shortcodes as well. To add another slide click “Addd Slide”. Order your slides via drop-and-drop. Once you have added all your slides click “Save Changes”.
Fullscreen Background Video (YouTube)
To add a fullscreen background video go to Appearance > Theme Options > Home Section. Under “Home Section: Background Feature” select “Fullscreen Video”.
Paste your YouTube video IDs in “Background Video”. To create a playlist separate the video IDs with a comma. Enter your play button text. Than “Upload” your video placeholder background image. It serves also as a fallbak for mobile devices, that don’t support the background video feature.
Contact Form Setup
As our contact form of choice we are using the popular Contact Form 7 WordPress plugin. Before reading on make sure that you have installed and activated it, as described under 1.3 Install & Activate Recommended / Required Plugins
Once activated go to Contact. Click on Contact form 1. This is how the default contact form looks like:
Replace the code within the Form textarea with the code below, to create the exact same form which is being used in the theme demo:
<div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="name">Name <span class="text-warning">*</span></label> [text* your-name class:form-control id:name] </div> <div class="form-group"> <label for="email">Email <span class="text-warning">*</span></label> [email* your-email class:form-control id:email] </div> <div class="form-group"> <label for="subject">Subject</label> [text your-subject class:form-control id:subject] </div> <div id="form-captcha" class="form-group"> <label class="control-label">Are you human? <span class="text-warning">*</span></label>[quiz captcha "7even + 5ive =|12"] </div> </div> <div class="col-sm-6"> <label for="message">Message <span class="text-warning">*</span></label> [textarea your-message class:form-control id:message] [submit class:btn class:btn-primary class:btn-block "Send the message"] </div> </div>
This is how our custom contact form page looks like after inserting our custom code:
IMPORTANT: Under Mail you have to replace the recipient’s email address with your own. You can also customize the message the recipient gets and a couple of other options. Under Messages you can customize the notifications, such as errors and success, that the person submitting the contact form will see.
Contact Form Captcha
Contact Form 7 supports two types of captchas, to protect you from spam mails being submitted through your contact form.
1. Quiz Captcha
This is what we use by default. The code for it is:
[quiz captcha "7even + 5ive =|12"]
You can create your very own quiz by creating a question + answer. The default quiz is asking for the result of 7 + 5, which is 12. To learn more about Quiz Captchas go to: http://contactform7.com/quiz/
2. Really Simple CAPTCHA
You are probably familiar with image captchas from many websites you are visiting every day. But not everyone likes to answer them plus they require graphic libraries installed on your server. That’s why by default we include the Quiz Captcha. To learn more about the Really Simple CAPTCHA go to: http://contactform7.com/captcha/
Than you want to use it instead of the Quiz Captcha replace the quiz shortcode with this:
[captchac captcha] [captchar captcha]
And installed & activate the Really Simple CAPTCHA plugin for it to work.
How to add a contact form to a post or page
To actually use the contact form we have to copy the custom shortcode, which you will see at the very top of your contact form page. In our case the contact form shortcode is:
[contact-form-7 404 "Not Found"]
As the ID is random number you will probably see a different one. Copy this shortcode and paste it into the text editor of your contact page.
That’s it. You can create as many contact forms as you need and paste them wherever you want.
Team Members Setup
After you have created a Team Section its time to add some team members. Go to Team > Add New Team Member.
The title will be the person’s name. To set a profile photo click “Set featured image” under “Featured Image” on the right-hand side of your screen.
If you want to show four team members use a photo with a dimension of 300×300. For three team members per row the ideal dimension is 400×400. Displaying two members per row the dimension should be 600×600.
When adding content to the text editor a “more” link will show when hovering over the profile photo. A click on this link will open a modal with the content as the online demo illustrates. Underneath the text editor is another option call “Position”, that will show the person’s position within the company when hovering over the profile photo and in the popup modal.
That’s it. Just repeat these steps for each team member.
We created our portfolio section in chapter 1.5.4 If you haven’t done so, do it now before you continue.
To add our very first project go to Portfolio > Add New Project.
- Give your project a title.
- Add your content.
- Add the project categories. It is recommended to assign at least one category to any project, as the project’s categories will be used to make your portfolio sortable. To disable the portfolio filter go to Appearance > Theme Options > Portfolio.
- Set a featured image. This will serve as the project thumbnail in your portfolio section. If no featured image is selected, the project won’t appear in the portfolio section.
- IMPORTANT: Minimum dimension for a featured project image is 600x400px. As all featured project images will be cropped to that size you have to make sure you don’t upload a featured project image that has dimensions small than 600x400px.
- Scroll down to “Project Content” and set the width of your media content (images, slideshow, video).
By default the media content width is set to 50%, so the content you’ve entered in the texteditor will show next to the project media content.
When selecting a width of 100% the texteditor content will be shown underneath the media content.
- Optional: Scroll down to “Project Images” and upload your project images. Uploading more than one image will create a slideshow with controls. Which is now being used on the fullscreen project expander, instead of the featured image. You can drag-and-drop those image to change their order.
- Optional: Scroll Down to “Project Video”, select the video service of your choice and insert the video ID. You don’t have to delete your slideshow. When entering a video ID the video will be shown instead of the project images.
To make changes on the theme files themeselves, don’t edit any of the default Worx files, as your changes their will be lost, when updating the theme. This is where the Child Theme comes in handy. You will find it within your download. It’s named worx_wp-child.zip. Upload it as you would upload a normal WordPress theme. Than go to Appereance > Themes and activate Worx Child Theme. You can add your styles to style.css after the @import on line 17.
To learn more about how to use a Child Theme have a look at the official WordPress Codex: http://codex.wordpress.org/Child_Themes
Quick note: functions.php of a Child Theme, unlike style.css, does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php (specifically, it is loaded right before the parent’s file).
Worx comes with dozens of so called Theme Options, that allow you to customize this theme to your own needs without touching a single line of code. All Theme Options are located under Appearance > Theme Options. To change an option simply browse the Theme Options Tabs on the left-hand side, make your changes and click “Save Changes”.
- Accent Color
- Site Style
- Front Page Section Title Style
- Preloader Background Color
- Preloader Image
- Custom Styles (CSS)
- Custom Scripts (Google Analytics etc.)
- Show Menu on Home Section
- Transparent Menu on Home Section
- Menu Logo
- Show Parallax Menu Items on Frontend
- Static Menu on Mobile Devices
- Home Section: Background Feature
- Fullscreen Background Image
- Fullscreen Slideshow
- Fullscreen Video
- Background Image Dimension
- Parallax Background Overlay Pattern
- Custom Background Overlay Pattern
- Parallax Background Overlay Opacity (in %)
- Parallax Background Image Scroll Speed
- Enable Parallax in Safari Browser
- Body Font
- Menu Font
- Section Title Font
- Section Subtitle Font
- H1 Heading Font
- H2 Heading Font
- H3 Heading Font
- H4 Heading Font
- H5 Heading Font
- H6 Heading Font
Add your Twitter API keys to retrieve tweets using Twitter API 1.1
- Portfolio Filter
- Portfolio Full Width
- Open Project in New Window
- Project Title & Categories
- Show Google Maps
- Initial Zoom Level
- Google Maps: Marker Icon Color
- Google Maps: Map Marker Popup Text
- Google Maps: Show Marker Popup
- Footer Background Color
- Footer Text Color
- Footer Link Color
- Footer Link Hover Color
- Copyright Info
- Social Network Links
- Show Sidebar
- Blog Post: Show Author
- Blog Post: Social Sharing Buttons
- Show Footnote
- Footnote: Text
- Footnote: Link Text
- Footnote: Link URL
Import / Export Options
Always backup your options, before you apply big changes.
Worx comes with plenty of Shortcodes, that allow you to add complex preformatted content with a single click. No coding skills required.
Important: In order to use these shortcodes you have to install and activate the Worx Shortcodes Plugin first. After you have done this, read on.
To add a shortcode, click the dark shortcode icon in the texteditor (Visual Mode) when editing posts or pages. All shortcodes will appear in a dropdown menu like this:
In case you have imported the demo content you can go to Pages > Shortcodes to see some of the shortcodes in action.
[stretch] Title Text Goes Here [/stretch]
When using the [stretch] shortcode make sure that there are no other shortcodes within it. You can wrap them around [stretch].
[home_title_color] [stretch]Title Text Goes Here[/stretch] [/home_title_color]
[stretch] [home_title_color]Title Text Goes Here[/home_title_color] [/stretch]
[home_buttons] [button_light link="#about" text="Explore"] [button_dark link="#about" text="Explore"] [/home_buttons]
Make sure to wrap your home section buttons with [home_buttons]. As this will automatically position them centered at the lower part of your screen.
Home Title Accent Color Background:
[home_title_color] Title Text Goes Here [/home_title_color]
Home Layout Split: Color
[home_layout_split_color align="left"] [home_title text="Title Text"] [home_buttons] [button_dark link="#" text="Button Dark"] [/home_buttons] [/home_layout_split_color]
Home Layout Split: Light
[home_layout_split_light align="left"] [home_title text="Title Text"] [home_buttons] [button_dark link="#" text="Button Dark"] [/home_buttons] [/home_layout_split_light]
Home Layout Split: Dark
[home_layout_split_dark align="left"] [home_title text="Title Text"] [home_buttons] [button_light link="#" text="Button Light"] [/home_buttons] [/home_layout_split_dark]
Worx is based on the popular Bootstrap 3 framework, which is using a 12 columns grid system. Simply add [row] and insert your columns. The following example will create a two column layout, where each colum has a width of 50%. Therefor named “one_half”:
[row] [one_half] [/one_half] [one_half] [/one_half] [/row]
Bootstrap 3 has a responsive mobile first grid system with breakpoints for smartphones, tablets, small screen desktops and large desktops. By default all columns shortcodes are using the “sm” breakpoint. To apply a different beakpoint you can use “xs” for smartphones, “md” for medium device laptops or “lg” for large device desktops (>1199px). See the example below:
You can also use Bootstrap’s grid offest like this:
[one_half breakpoint="xs" offset="3"]
This will offset your 6 columns smartphone grid by 3 columns.
If you don’t know what this means at all, don’t worry. Simply use [row] and add your columns, and you’ll be fine.
Choose between six different buttons:
[button type="default" text="Button Text" size="" url="http://"]
type: “default” | “primary” | “success” | “info” | “warning” | “danger”
size: “xs” | “sm” | “lg”
We use FontAwesome to display our social network icons.
name supports all FontAwesome brand icons.
url contains the link to your social network profile.
transparent set to “yes” will show the brand color on hover.
Twitter icon (color):
[social name="twitter" url="https://twitter.com/twitter"]
Twitter icon (transparent):
[social name="twitter" url="https://twitter.com/twitter" transparent="yes"]
[icon type="check" font_size="30px" color="white" background="black" border_radius="50%" padding="20px"]
The above shortcode will output:
For “type” use one of the FontAwesome 4.0.3 icon class names (like: “bell” or “bolt” etc.)
Insert this to clear any floatet content, such as images.
[whitespace] creates an empty container, that lets you set it’s “height”. Ideal for adding some extra space where needed. The following example will add a whitespace with a height of 30px.
If you are familiar with CSS you can simply add:
Go to Pages > Shortcodes to learn more about the remaining shortcodes. Make sure you have imported the demo content. Otherwise you won’t see the “Shortcodes” page.
Make sure that you have setup the blog page as shown in chapter “Setup Front & Blog Page“.
To create a new blog post go to Posts > Add New.
On the right hand-side of the “Edit Post” screen you can choose between the follwing post types:
Select the post type that suits your post the best.
When selecting a post type other than “Standard” you will see a custom “Settings” box underneath the text editor.
Post Type: Standard
This is the default post type. When setting a featured image it will show on top of your blog post, followed by the title and post content.
Post Type: Quote
No content to add here. Just scroll down to “Quote Settings” and enter your quote and the source / author (optional).
Post Type: Audio
Add your content. Than scroll down to “Audio Settings” to paste your oEmbed code, such as a Soundcloud link (https://soundcloud.com/spinninrecords/cedric-gervais-cid-never-come) or any audio URL (.mp3 file link for example).
Post Type: Video
Add your content. Than scroll down to “Video Settings”, select the video service you want to include a video from (YouTube, Vimeo or Custom Embed Code). For YouTube and Vimeo videos paste in the video ID. When selecting “Custom Embed Code” paste in the entire embed code, such as an iframe.
Post Type: Link
No content to add here. Just scroll down to “Link Settings” and paste your link URL into the text field.
Post Type: Gallery
Add your content. Than scroll down to “Gallery Slideshow Settings” and select the images you want to add to use for this gallery. Order via drag-and-drop.
- FIXED Child Theme Load Parallax Custom Background Pattern
- ADDED "Section Settings“ Background Color
- ADDED Section Title Style „Square Border"
- ADDED Theme Options: Show Project Meta Data (Title & Categories)
- NEW Theme Options - Site Style (light & dark)
- IMPROVED Twitter Shortcode Styling outside of Parallax Section
- IMPROVED Slideshow Controls Styling
- NEW Latest Blog posts Section
- NEW Team Member Name & Title View
- ADDED Theme Option: Open Project in New Window instead of modal
- ADDED Blog Title Tagline
- ADDED Projects in Fullscreen Expander Are Now Keyboard Browsable with left and right arrow keys
- ADDED Autoplay Home Background Video On/Off toggle
- UPDATED theme libraries
- ADDED Next and previous blog post on single blog post
- FIXED Google Maps protocol enqueue
- FIXED Firefox active navigation link background issue
- REMOVED section fade in
- IMPROVED Google Maps script load
- IMPROVED HTTPS conformity
- IMPROVED Portfolio filter trigger
- WordPress 3.9 compatible
- ADDED Theme Option - Enable/disable static navigation on mobile devices
- FIXED Parallax background image positioning issue after portfolio sections
- FIXED Menu toggle on mobile
- WordPress 3.9 compatible
- ADDED Theme Options: Parallax Toggle for Safari Browser (deactivated by default)
- ADDED Theme Options: Toggle visibility of parallax section menu links
- ADDED menu "Footer"
- FIXED accent color issue
- FIXED menu overflow issue on mobile
- Initial Release