Docs

Installation

To use this WordPress theme, you must have WordPress installed on your web hosting account. If you don't have web hosting yet, you'll need to take care of that first. We recommend these great web hosts, which offer one-click installations of WordPress.

If you already have a web hosting account, but don't have WordPress installed on your server, visit WordPress.org and follow the installation instructions.

Once you have WordPress installed, follow these instructions for installing your new theme:

  1. Log in to your WordPress dashboard. This can be found at yourdomain.com/wp-admin
  2. Go to Appearance → Themes and click on the Install Themes tab
  3. Click on the Upload link
  4. Upload the zip file that you downloaded and click Install Now
  5. Click Activate.

Please Note: If you have your homepage set to a static page, you'll need to change that now. So go to Settings → Reading and make sure that "Front page displays" option is set to "Your latest posts".

Installing your theme 1 Installing your theme 2 Installing your theme 3

Media Settings

Go to Settings → Media and change the options to:

  • Thumbnail size
    • Width: 150
    • Height: 150
    • [checked] Crop thumbnails to exact dimensions (normally thumbnails are proportional)
  • Medium size
    • Max Width: 800
    • Max Height: 0
  • Large size
    • Max Width: 1200
    • Max Height: 0
  • Embeds
    • [checked] When possible, embed the media content from a URL directly onto the page. For example: links to Flickr and YouTube.
    • Maximum embed size
      • Width: 1200
      • Height: 0

Please Note: If you are switching from another theme or need to resize old images, install and run Regenerate Thumbnails.

Media Settings

Importing Sample Content

Download this XML file if you want to import sample content from our demo site. Only do this after you have configured your Media Settings (see above). To import this file into your WordPress site follow these instructions:

  1. Visit Tools -> Import
  2. Upload the WordPress XML file
  3. Depending on the design you created, some post types (Services, Testimonials, etc) might not import. This is expected behavior, so don't worry if you get a "Failed to import..." message.

Customizer

The Customizer (Appearance -> Customize) is where you will customize the design of your website. The Customizer contains dozens of options for logos, slides, welcome messages, background images, header images, newsletter signup form integration, color schemes, fonts, menus and widgets. Here you can preview your changes before making them publicly visible.

Theme Customizer

Menus can be created by visiting Appearance → Menus. To add a new menu to your site:

  1. Go to Appearance → Menus.
  2. Create a new menu item by clicking the "Create a new menu" link.
  3. Select the pages you want to display in your menu and click the Add to Menu button. If you do not see the type of page (category, tag, portfolio, gallery, etc) you want to display, click the Screen Options link at the top of the page and make sure the page type is checked.
  4. Once you have set your menu as you want it, click the Save Menu button.
  5. Then, assign that menu to your desired theme location to ensure your menu appears where you want it and click Save.

Menus Menu Position

Widgets

You can add Widgets to your theme by visiting Appearance → Widgets. This theme supports Sidebar and Footer widget positions by default. If you chose additional Homepage Widgets when you originally created your site at Theme.Works, they will be displayed on the homepage. Each Homepage Widget will be displayed in either a 1, 2, 3 or 4 column layout, depending on which design you selected when you created your site.

Widgets

Social Media

You can add social media icons to both the top and bottom of your site by visting Appearance → Customize → General → Social Media.

Social

This theme relies heavily on a feature called "Featured Images" in WordPress. If your post is missing a Featured Image, the post may not appear on the homepage or on archive pages, depending on the specific design of your theme.

To choose the image you want to set as a featured image for a post or page, click the Set as Featured Image button at the right of the page. For best results use images that are at least 1200 px wide.

Featured Image

Inserting Galleries

You can create an image gallery by using the native Add Media -> Create Gallery feature on a WordPress post or page. By default, all galleries will be displayed as slideshows, like this slideshow example. If you'd prefer a different gallery layout, then install the free JetPack.me plugin and follow their instructions for selecting a gallery style of your choice.

Inserting Galleries

Header Images

This theme supports both a site-wide header image and header images on a per-post or per-page basis. To add a Header Image for your site, visit the Appearance → Header page or the Appearance → Customize → Header. You can change the color of the text appearing on top of your header image by picking a color on that page.

Header Image

Each Post and Page can also have a custom header image. The Custom Header box appears right above the Featured Image box, which is located on the right side of the page. You can change the color of the text appearing on top of your header image by picking a color on that page.

Single Header Image

Background Images

This theme supports custom background images. To add a Background Image for your site, visit Appearance → Background or Appearance → Customize → Colors → Background Image.

Background Image

Page Templates

Page Templates allow you to create specific pages with specific design and functionality purposes. To use Page Templates, create a new page in Pages → Add New. Choose a template from the Page Attributes → Templates section at the right, below the Publish box. You do not need to add any content to the content area. Publish the page.

This theme comes with the following Page Templates:

  1. Archives - Displays a listing of category and date-based archives.
  2. Blog - Displays your posts on a page.
  3. Wide - A full-width page template without a sidebar.
  4. Narrow - A narrow page template without a sidebar.
  5. Portfolio (1 Column) - Displays portfolio entries in a one column layout.
  6. Portfolio (2 Column) - Displays portfolio entries in a two column layout.
  7. Portfolio (3 Column) - Displays portfolio entries in a three column layout.
  8. Portfolio (4 Column) - Displays portfolio entries in a four column layout.
  9. Team - Displays a list of users who you have assigned as "Staff". The page will also display relevant biographical and social media links for each staff member. You can mark users as staff by editing their profile page in WordPress (Users → Your Profile or Users → All Users → Edit).
  10. Page Builder - Allows you to create a custom page using the section designs that you originally selected when you created your theme at Theme.Works. See the "Page Builder" section below for details.

Page Templates

Homepage

By default, the homepage will display the design that you created at Theme.Works. You can, however, choose to display a different page to be your homepage by visiting the Settings → Reading or the Appearance → Customize pages and assigning a static front page. For example: To use one of your Portfolio pages as your homepage, create a new page in Pages → Add New. Assign this page to one of the Portfolio page templates in the Page Attributes → Templates section at the right. You do not need to add any content to the content area. Publish the page. It will display any Portfolio entries that you have added via Portfolios → Add New.

Reading Settings

Page Builder

The Page Builder feature allows you to create new page designs by adding and reorganizing sections you selected when you originally created your theme at Theme.Works.

How to use the page builder:

  1. From your WordPress dashboard, add a new page (or edit an existing page).
  2. Change page template to Page Builder.
  3. Click a section button under "Your Design Options" to add a section. Drag and drop added sections to reorganize.

If you'd like to assign this new page to be your homepage, simply visit the Settings → Reading or the Appearance → Customize pages and assign this new page to be front page.

Builder

Post Formats

This theme supports the following post formats — gallery, image, video, quote and standard — which are unique layouts for specific types of posts. Each post format has its own unique layout on the homepage, on its archive page and on the individual single post pages. While all the post formats work with default behaviour, here are some that have unique characteristics:

Gallery Post Format

To show a slideshow of images (an image gallery), upload as many images as you like using the media uploader tool and insert the Gallery into the post. Be sure to assign a Featured Image for that post. For best results, use images that are at least 800 pixels wide. All posts assigned to the Gallery Post Format will then display the Gallery at the top of the post, with any text added into your post's edit page displayed below.

To insert a gallery:

  1. Switch to the Gallery tab.
  2. Click the Add Media button to launch the Media Uploader tool.
  3. Click the Create Gallery option.
  4. You can choose to upload images from your computer or you can use images that already exist in your Media Library. You cannot use an image from a URL on the web in your gallery.
  5. If you are uploading images, click the Select Files button and navigate to each of your images on your computer. Click the Open button to open each image.
  6. Once each of your images has been uploaded, you will have the option to add a title, caption, alternative text and description.
  7. After you have added all of the images you wish to display in the gallery, switch to your media library tab and select those images.
  8. Then, click the Create a New Gallery button.
  9. Set a featured image for your Gallery.
Video Post Format

To display a video in your post, switch to the Video tab. Paste your video's embed code in the Video URL or Embed Code field. The video will display above all post content on the homepage, single, and archive pages. This works for all interactive elements (videos, maps, panoramas) that have embed code. You can also add additional interactive elements into the content area, though these will appear inside the content area, rather than above it.

Post Formats

Video

For externally hosted videos (for example a YouTube or Vimeo video), you can directly paste the link of your video page into the content editor. You do not have to paste the embed code. WordPress will automatically embed the video from the link.

You can easily embed videos from a Video hosting service such as Vimeo or YouTube into your posts or pages.

To add a video:

  1. From your WordPress dashboard, add a new post or page (or edit an existing post or page).
  2. Paste in your video's URL, for example https://vimeo.com/31985752.
  3. Publish or Update your post or page.

Please note: If your video is not appearing correctly, remove the ‘s’ from the URL, so https becomes http. You can also toggle the editor into Text mode (see screenshot below) to help remove any hidden characters from your video link url.

Video

Shortcodes

Shortcodes enable you to easily add buttons, icons, pricing tables and more without modifying CSS, HTML or PHP.

There are 8 shortcodes included in this theme:

  1. Contact form
  2. Grid
  3. Dropcap
  4. Button
  5. Icon
  6. Box
  7. Highlight
  8. Divider
  9. Pricing table
  10. Signup form

See live examples here: Shortcodes

Below is a list of all the shortcodes and instructions on how to use each one.

Contact form

This generates a nice contact form that you can add to any page.

Usage: [tw_contact_form]

Grid

Use these grid shortcodes to create any combination of two, three, four or five column grid layouts. Note: You cannot have any spaces or returns between your grid column shortcodes, otherwise, they won't align properly.

Usage (two columns): [tw_grid cols="2"]First column content[/tw_grid][tw_grid cols="2"]Second column content[/tw_grid]

Usage (three columns): [tw_grid cols="3"]First column content[/tw_grid][tw_grid cols="3"]Second column content[/tw_grid][tw_grid cols="3"]Third column content[/tw_grid]

Usage (four columns): [tw_grid cols="4"]First column content[/tw_grid][tw_grid cols="4"]Second column content[/tw_grid][tw_grid cols="4"]Third column content[/tw_grid][tw_grid cols="4"]Fourth column content[/tw_grid]

Usage (five columns): [tw_grid cols="5"]First column content[/tw_grid][tw_grid cols="5"]Second column content[/tw_grid][tw_grid cols="5"]Third column content[/tw_grid][tw_grid cols="5"]Fourth column content[/tw_grid][tw_grid cols="5"]Fifth column content[/tw_grid]

Attributes: cols

Available cols options: 2, 3, 4, 5.

Button

Creates a button with custom attributes below.

Usage: [tw_button url="http://www.theme.works" target="_blank" rel="nofollow" class="your-css-class"]Button text[/tw_button]

Attributes: url, title, target, rel, class

Dropcap

Drop caps are typically used to offset the first letter of the first paragraph from the rest of the text.

Usage: [tw_dropcap size="64px" color="#ff0000"]G[tw_dropcap]

Attributes: size, color

Icon

Display a variety of different icons, colrs and sizes using the attributes below.

Usage: [tw_icon type="twitter" size="32px" color="#000000"]

Attributes: type, size, color

Availabe types: standard, aside, image, gallery, video, status, quote, link, chat, audio, github, dribbble, twitter, facebook, facebook-alt, wordpress, googleplus, linkedin, linkedin-alt, pinterest, pinterest-alt, flickr, vimeo, youtube, tumblr, instagram, codepen, polldaddy, googleplus-alt, path, skype, digg, reddit, stumbleupon, pocket, dropbox, foursquare, comment, category, tag, time, user, day, week, month, pinned, search, unzoom, zoom, twitter, show, hide, close, close-alt, trash, star, home, mail, edit, reply, feed, warning, summary, cloud, key, dot, next, previous, expand, collapse, dropdown, dropdown-left, top, draggable, phone, send-to-phone, plugin, cloud-download, cloud-upload, external, document, book, cog, unapprove, cart, pause, stop, skip-back, skip-ahead, play, tablet, send-to-tablet, info, notice, help, fastforward, rewind, portfolio, heart, code, subscribe, unsubscribe, subscribed, reply-alt, reply-single, flag, print, lock, bold, italic, picture, fullscreen, website, ellipsis, uparrow, rightarrow, downarrow, leftarrow, xpost, hierarchy, paintbrush, sitemap

Box

Wraps content inside of a box, which you can style using the attributes below.

Usage: [tw_box color="#000000" background="#CCCCCC" float="right" text_align="center" width="50%" margin_top="20px" margin_bottom="40px" class="my-css-class"]Your content here[/tw_box]

Attributes: color, background, float, text_align, width, margin_top, margin_bottom, class

Highlight

A simple shortcode to highlight a block of text.

Usage: [tw_highlight background="#CCCCCC" class="my-css-class"]Your content here[/tw_highlight]

Attributes: background, class

Dividers

Creates a single horizontal line, which you can style using the attributes below.

Usage: [tw_divider type="dotted" margin_top="20px" margin_bottom="40px" class="my-css-class"]

Attributes: type, margin_top, margin_bottom, class

Availabe types: solid, dashed, dotted, double, royal

Pricing table

Use this to create a single pricing table layout. Tip: Use the grid shortcode above and include a pricing table inside each one to create a pricing table with multiple options.

Usage: [tw_pricing plan="Basic" cost="$100" per="per month" button_url="http://www.theme.works" button_text="Purchase" button_target="self" button_rel="nofollow"]<ul><li>30GB Storage</li><li>512MB Ram</li><li>10 databases</li><li>1,000 Emails</li><li>25GB Bandwidth</li></ul>[/tw_pricing]

Attributes: color, featured, plan, cost, per, button_url, button_text, button_target, button_rel, class

Signup form

Use this shortcode to display a newsletter signup form in Posts, Pages and in Widgets.

Usage: [tw_signup display="inline" location="sidebar" message=1 ][/tw_signup]

Attributes: display, location, message

Available display options: inline, block Avaialble location options: header, sidebar, footer, content (use for css targeting and styling) Available message options: 1 to show, 0 to hide the the signup message.

Action Hooks

Action hooks are a means of providing a way for developers to insert their own code into specific locations within the theme without hacking the core theme files. For example, if you wanted to put a custom message at the top of your site, you could use the tw_header_above_hook. You have two options for where you put your action hook code:

  1. A functionality plugin - download blank example plugin.
  2. A child theme (specifically in the functions.php file) - create yours now.
Example - Add message above header
function my_custom_header_message(){
    echo '<div class="my-custom-header-message">';
    echo '<p>Hello there! This is my custom header message</p>';
    echo '</div>';
}
add_action( 'tw_header_above_hook', 'my_custom_header_message' );

Available action hooks:

  1. tw_header_above_hook
  2. tw_header_below_hook
  3. tw_footer_above_hook
  4. tw_footer_below_hook
  5. tw_blog_above_hook
  6. tw_blog_below_hook
  7. tw_client_above_hook
  8. tw_client_below_hook
  9. tw_contact_above_hook
  10. tw_contact_below_hook
  11. tw_ecommerce_above_hook
  12. tw_ecommerce_below_hook
  13. tw_portfolio_above_hook
  14. tw_portfolio_below_hook
  15. tw_service_above_hook
  16. tw_service_below_hook
  17. tw_signup_above_hook
  18. tw_signup_below_hook
  19. tw_signup_above_form_hook
  20. tw_signup_below_form_hook
  21. tw_slideshow_above_hook
  22. tw_slideshow_below_hook
  23. tw_social_above_hook
  24. tw_social_below_hook
  25. tw_testimonial_above_hook
  26. tw_testimonial_below_hook
  27. tw_widget_above_hook
  28. tw_widget_below_hook

Filters

Filters allow you to change existing elements of Theme.Works themes. For example, if you wanted to change the "Portfolio" title on the homepage to "My Work," you would add a filter. And here is the code to do this:

function my_portfolio_title(){
    return 'My Work';
}
add_filter( 'tw_portfolio_title', 'my_portfolio_title' );

Here is a GIST containing examples for filtering all section titles and some additional text.

You can also use filters to change the number of entries in sections on the homepage. For example, if you wanted to change the number of portfolio entries to 12, you would do this:

function my_portfolio_args_filter(){
    $args = array(
        'post_type' => 'portfolio',
        'posts_per_page' => 12,
        'ignore_sticky_posts' => true,
        'paged' => $paged
    );

    return $args;
}
add_filter( 'tw_portfolio_args_filter', 'my_portfolio_args_filter' );

All section titles and section query arguments can be filtered. This gives you maximum flexilblity. For example, you could even use the Portfolio section design and simply change the Post Type to, say, Posts instead of Portfolio if you want:

function my_portfolio_args_filter(){
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 12,
        'ignore_sticky_posts' => true,
        'paged' => $paged
    );

    return $args;
}
add_filter( 'tw_portfolio_args_filter', 'my_portfolio_args_filter' );

Available Title Filters:

  1. tw_blog_title
  2. tw_client_title
  3. tw_contact_title
  4. tw_ecommerce_title
  5. tw_portfolio_title
  6. tw_service_title
  7. tw_signup_title
  8. tw_social_title
  9. tw_testimonial_title

Available Text Filters:

  1. tw_ecommerce_button_text

Available Query Argument Filters:

  1. tw_blog_args_filter
  2. tw_client_args_filter
  3. tw_ecommerce_args_filter
  4. tw_service_args_filter
  5. tw_testimonial_args_filter

The Banner section can be used as a call to action, an important component of generating leads and funneling visitors into the right places around your website.

  1. Visit Appearance → Customize → Sections → Banner.
  2. Customize the text and button fields to your liking.
  3. Customize the background and text colors.
  4. Click Save.

Banner Settings

Blog

The Blog section only displays Post entries. The most recent entry will show up at the top. Give your entry a title, content and be sure to set a Featured Image.

Blog

Clients

To add a new Client, click on Clients → Add New. Give your client entry a title, add some text to the editor field and set a featured image. To modify the order in which your Client entries are displayed on your website, simply modify the publish date of each entry. The most recent entry will show up first.

Client

Contact

Add your contact info on Appearance -> Customize -> Sections -> Contact in WordPress. The details that you fill out here will be displayed in the contact section of your homepage. The contact form will send emails to the email address associated with the administrator of your WordPress site. You can set this email address on the Settings -> General -> Email Address page in your WordPress site.

Contact Settings

E-Commerce

Theme.Works integrates with three of the most popular E-Commerce plugins: Sell Media, WooCommerce and Easy Digital Downloads. After you have activated and added items to either of those three plugins (Don't add them all! Things will fail!) you must visit Appearance -> Customize -> Sections and select the plugin that you plan want to integrate into your Theme.Works website.

When adding new products, make sure to set a featured image. To modify the order in which your E-Commerce entries are displayed, simply modify the publish date of each entry. The most recent entry will show up first. To change the "Products" section title and "Purchase" button text, follow these instructions.

E-Commerce

Portfolios

To add new portfolio items, click on Portfolios → Add New. Give your portfolio entry a title, add some text to the editor field and set a featured image. You can also assign categories and tags to your portfolio items so that you can further organize your Portfolio. To modify the order in which your Portfolio entries are displayed on your website, simply modify the publish date of each entry. The most recent entry will show up first.

Portfolio

Services

To add a new Service, click on Services → Add New. Give your service entry a title, add some text to the editor field and set a featured image. To modify the order in which your Services are displayed on your website, simply modify the publish date of each entry. The most recent entry will show up first.

Service

Signup

The Signup section on the homepage can be used to grow your newsletter list at MailChimp. To configure your Signup form:

  1. Visit the Appearance → Customize → General → Signup Forms.
  2. Paste in your MailChimp API Key (help).
  3. Click Save Settings.
  4. Next, select a Newsletter List to which your site subscribers will be added to at MailChimp.
  5. Optionally select to show additional fields (first name, last name).
  6. Click Save Settings again. Done!

The signup form can also be shown using a shortcode in Posts, Pages and Widgetized areas. Refer to the "Shortcode" section in this documentation for usage. You can also display the signup form in other regions in your template using a template tag: <?php echo do_shortcode( '[tw_signup][/tw_signup]' ); ?>

Signup Settings

Slideshows

First, configure your Slideshow Options on Appearance → Customize → General → Slideshow Options.

Slideshow Options

To create a Slideshow for the homepage, visit Appearance → Customize → Sections → Slideshow. Please note: To add a slideshow to a Post or Page, see the "Post Formats -> Gallery Post Format" section above.

Slideshow Images

Click the Upload or Select Images button. Upload as many images as you like or select already uploaded images to be used in the slideshow. Click and drag images on the Customizer to change their order. For best results, we recommend that you:

  1. Use images of the same orientation. Mixing horizontal and vertical images will have undesireable effects.
  2. Use images that are the exact same height and width.
  3. Use images that are at least 1200 pixels wide.

Slideshows can have text and buttons that appear on top of them:

  1. Click on any image in the media uploader.
  2. Give the image a Title and Caption.
  3. To add a button to the slide, add Button Text and a Button URL.
  4. To change the alignment of the text appearing on your slide, change the Slide Align option.

Do this for every image in your slideshow. When done, click the "Use Selected Images" button and save your changes.

Slideshow Text and Alignment

Contact

Add your contact info on the Appearance -> Theme Options -> Contact page in WordPress. The details that you fill out here will be displayed in the contact section of your homepage. The contact form will send emails to the email address associated with the administrator of your WordPress site. You can set this email address on the Settings -> General -> Email Address page in your WordPress site.

Testimonials

The Testimonials section is a creative way to build social value to your site visitors. To add a new Testimonial, visit Testimonials → Add New. Give your Testimonial a title, add some text to the editor (this becomes the testimonial text), fill in the fields in the Author Options box and set a Featured Image.

Testimonial