Clay Documentation

Overview

Thank you for choosing Clay for your website project. I hope that you find it makes your project easy to realize so that you can focus more time on growing your business.

Below, please find all of the documentation to customize your theme that you have just purchased. I have seperated this document into categories for your ease of use. You can use the top navigation to jump to any desired area.

If you have any questions or comments regarding your theme, please feel free to contact support. Also, if you are happy with the theme, I would be grateful for your feedback with a Review on the MOJO website. Thanks so much!

Back To Top

Installation

To install the Clay Theme you will need WordPress v3.5 or newer. Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

1) Using WordPress Theme Upload

Be sure to extract the file "clay.zip" from the "Clay - Theme and Documentation" download before uploading. Using the "Clay - Theme and Documentation" zip file directly will result in a "Missing Style Sheet" error.

  1. Login to your WordPress admin.
  2. In the "Appearance > Themes" menu click the tab "Install Themes"
  3. At the top of the page click, "Upload", then click the file input to select a file.
  4. Select the zipped theme file, "clay.zip", and click "Install Now"
  5. After installation you will receive a success message confirming your new install.
  6. Click the link "Activate"

2) Uploading by FTP

  1. Login to your FTP server and navigate to your WordPress themes directory.
    Normally this would be "wp-content/themes"
  2. Extract the files from the zipped theme.
  3. Copy the folder "clay" to your themes directory.
  4. After the files finish uploading, login to your WordPress admin.
  5. In the "Appearance" menu click "Themes"
  6. Click "Activate" for the theme "Clay"

Importing the Demo Content

To import the demo content, you will need to first install and activate the One Click Demo Import plugin. Follow the prompts at the top of your page to do so.

  1. At the top of your page, click the Begin Installing Plugin link.
  2. On the next page, click the Install link.
  3. On the next page, click the Return to Required Plugins Installer link.
  4. On the next page, click the Activate link.
  5. On the next page, click the Return to the Dashboard link.
  6. Next, go to Appearance / Import Demo Data.
  7. On the next page, click the Import Demo Data button.
  8. The importer will take several minutes to complete, just let it run.
  9. When the importer has finished, you will receive a message that it is done.

Finished with Installation?

Once the theme is installed you can configure it for your content. See the sections below on configuring the theme to start adding your content.

Back To Top

Theme Options

Whenever a setting is changed in the Theme Options panel, scroll to the bottom of the page and click the Save Options button.

Note: Clicking the Restore Defaults button will erase all values for the entire Theme Options panel, not just the section that is currently being viewed. Use caution when clicking this button as you can lose valuable data if not careful.

Theme Options - General

Logo Upload

  • By default, Clay will display your website name in the top left corner of the site. If you wish to use a logo image instead, the optimum maximum dimensions are 230px for width and 60px for height. To add a logo, use the Upload button.
  • When the image uploader pops up, you will be given two options (Upload Files or Media Library). Choose the method you wish to add your logo, choose the image, and click the Select button.
  • If you wish to have a retina optimized logo, you will need to have a version of the logo with the same file name plus the addition of "@2x" to the end. For example, logo.png and logo@2x.png. The @2x version should be a size that is twice the dimensions of the regular version. For example, if the regular logo is 230px x 60px then the @2x version should be 460px x 120px. Both files should be located in the same directory of the Media Library.

Favicon Upload

  • A favicon is the small icon seen in the url or tab bar of most browsers. It's also referred to as a bookmark icon. Favicons should be either 16px (square) or 32px (square) and should be either a .png file or an .ico file. To add a favicon, use the Upload button.
  • When the image uploader pops up, you will be given two options (Upload Files or Media Library). Choose the method you wish to add your favicon, choose the image, and click the Select button.

Custom CSS

  • Clay comes with the option to add custom CSS as needed to completely stylize every aspect of the site. To add new CSS rules, paste them into the textarea provided. Valid CSS standards should be followed when adding additional CSS.

Theme Options - Colors

Changing colors

  • To change the colors used throughout the site, select the option that you wish to change (Header, Footer, Font, etc). Click the Select Color button. A pop-up will appear, providing several options for selecting a new color. You can enter 6 digit hexadecimal codes in the top field, or you can use the color selector tools to view additional colors. If needed, the Default button for that color can be clicked to revert back to the default color for that option. The Default button is not to be confused with the Restore Default button which will erase all of your Theme Options custom settings.

Theme Options - Fonts

Changing the body font

  • Any Google Font can be used as the body font for the site. To use a Google Font, select a font from their site, and enter the font name into the field. Names with spaces should be entered with the space included. For example, if you wanted to use the font Titillium Web, it should be entered as "Titillium Web" (without the quotes). If the body font field is left blank, then the default font will be used.

Changing the heading font

  • Any Google Font can be used as the heading font for the site. To use a Google Font, select a font from their site, and enter the font name into the field. Names with spaces should be entered with the space included. For example, if you wanted to use the font Titillium Web, it should be entered as "Titillium Web" (without the quotes). If the heading font field is left blank, then the body font value will be used.

Call to Action

  • Clay has an optional Call to Action bar that can be displayed in the header on all pages/posts. Enter your message into the Call to Action Text field. To change what the button says, enter your button text into the Call to Action Button Text field. Enter your URL into the Call to Action Button Link field.
  • When entering your URL into the Call to Action Button Link field, be sure to enter a full URL, including http:// or https:// such as http://www.your-website.com/your-link.
  • If you wish to also display the Call to Action on the Homepage, refer to the Homepage section.
  • If you wish to simply display a message and no button, then paste the following code excerpt into the Custom CSS field on the General Tab of the Theme Options page:
    #header-cta-button { display: none; }

Social Icons

  • Choose which Social Icons are displayed in your header by checking the appropriate boxes. Enter the URL for the appropriate page for any icons that are used. For example, if you wish to use the Facebook icon, make sure that the checkbox is selected, then enter the URL for your Facebook page you wish to promote: https://www.facebook.com/bottomlessdesign
  • If you wish to use the Email icon, enter an email address in place of a URL: name@email.com
  • If you wish to use a link that doesn't have an icon represented, you can use the Custom Link option and enter the desired URL.

Theme Options - Homepage

Theme Options - Pages

  • Please refer to the Pages section.

Theme Options - Posts

  • Please refer to the Posts section.

Theme Options - Portfolio

Theme Options - Footer

Footer Text

  • Enter desired text to the Left Footer Text field to change the text that appears on the left side of the footer. Leave blank to display the default text.
  • Enter desired text to the Right Footer Text field to change the text that appears on the right side of the footer. Leave blank to display the default text.

Back To Top

Homepage

Setting up the homepage

  • By default, Clay will display your latest posts on the homepage. To use the homepage as seen in the demo, first create a new page and name it Home. As you're creating this page, select the "Homepage" template from the Page Template section in the far right column.
  • After creating the new Home page with the Homepage template, go to Settings/Reading (in the left navigation bar). For "Front page displays", choose "A static page", and for "Front page" select the new Home page from the drop-down menu. Then click Save Changes.

Homepage Slider

  • You can add and manage slides for the homepage slider under the "Slides" tab in the main WordPress admin menu. To add a new Slide, click Add New. Slides should be given a title. Images for the slides should be entered in the Featured Image section. The optimum size of the slider image is 1200px width x 500px height. To enter a Featured Image, click the Set Featured Image link. You can drag and drop your image to the pop-up media uploader or click the Media Library link if you've already added the image to your Media Library. Once your image is selected, click the "Set Featured Image" button, which will close the pop-up media window.
  • If you wish to upload a retina optimized image, the recommended dimensions are 2400px width x 1000px height.
  • Slides have an optional feature to display text. If you choose to display text with your slide, enter your text into the Description field. Select a Text Alignment (Left, Center, Right), and make sure to check the box for Show Text. When displaying text, the title of the slide will be displayed above the description.
  • You can add as many slides as you wish to the slider, although a good number is 1-4. It's not recommended to go over 6 slides. If you only choose a single slide, a static image will be shown in place of the slider. Slides will be displayed in the order they are posted (most recent first). If you need to adjust the order of the slides, edit the publish date/time.

Homepage Call to Action - Theme Options / Homepage

  • The Homepage Call to Action will display the same message & button as the main Header Call to Action. It is possible to only display the Call to Action on the Homepage and not the other pages if you wish. This is controlled by toggling the checkbox for Display Homepage Call to Action (on the Theme Options Homepage tab) or Display Header Call to Action (on the Theme Options Header tab).
  • To edit the fields for the Homepage Call to Action, change the values as input in the Theme Options Header Tab - Header Call to Action: Text, Button Text, Link. Note: this will also change the values of the Call to Action on all other pages/posts if the Header Call to Action is displayed.

Featured Pages - Theme Options / Homepage

  • Check the box to display this section, or uncheck it to hide it.
  • Select from any published pages to be displayed in the Featured Pages section. If the selected featured page has been given a Featured Image, the Featured Image will also display on the homepage.
  • If you wish to control the text that is displayed for the Featured Page on the homepage, please refer to the Pages/Page Excerpt section.

Featured Posts - Theme Options / Homepage

  • Check the box to display this section, or uncheck it to hide it.
  • Enter a title to be displayed with this section.
  • Select a category from your Post Categories to display on the homepage. You may wish to create a category such as Featured Posts, or use a category such as News, Events, etc.
  • Choose how many Featured Posts to display on the homepage.

Additional Homepage Content - Theme Options / Homepage

  • Check the box to display this section, or uncheck it to hide it.
  • Enter a title to be displayed with this section.

  • Content for the Additional Homepage Content section is entered on the page that was created with the Homepage Page Template (typically called Home). Go to Pages (in the left navigation menu) and select the Home page. Images and content entered on the edit screen will appear in the Additional Homepage Content Section. You can use images, text, HTML, or shortcode here as you would on any other page.

Back To Top

Pages

Page Templates

  • Clay comes with the following Page Template types: Default, Full Width, Homepage, & Blog.
  • The Default template is the main template seen throughout the demo for any page that has a sidebar. When adding a new page, this will always be used unless another template is selected.
  • The Full Width template does not display a sidebar, otherwise, it's the same as the Default template. To use the Full Width template, select if from the Page Template section in the far right column when adding or editing a page.
  • The Homepage template is used for displaying the homepage as seen in the demo. To use the Homepage template, select if from the Page Template section in the far right column when adding a page. For more info on setting up the Homepage, please refer to the Homepage section.
  • The Blog template is used for displaying the blog page when the homepage is set to the Homepage template. To use the Blog template, select if from the Page Template section in the far right column when adding a page. For more info on setting up the Blog page when using the Homepage template, please refer to the Posts section.
  • The Portfolio template is used for displaying the portfolio page. To use the Portfolio template, select if from the Page Template section in the far right column when adding a page. For more info on setting up the Portfolio page, please refer to the Portfolio section.

Page Featured Image - Theme Options / Pages

  • Check the box to display the Featured Image at the top of an individual page, or uncheck it to hide it. The optimum size for a Page Featured Image is 870px width x 325px height. In either case, you can still use the Add Media button to add an image anywhere within your page.

Page Excerpt

  • This feature will give you control over what is displayed for a page that is selected for the Homepage Featured Page.
  • To use the Excerpt feature on a Page, go to the edit screen for the desired page.
  • You may need to make the option visible. If this is the case, go to the very top of the edit screen and click the "Screen Options" button on the right. A drop-down menu will appear with display options. Check the box next to Excerpt to make it visible.
  • With the Excerpt section visible, enter your text into the Excerpt field. You can enter HTML here and it will be displayed.

Leave a Reply - Page Comments

If the bottom of your page displays the "Leave a Reply" section, this means that comments are turned on for that page.

To turn off comments for a page:

  • From the back-end of your site, go to Pages (in the left-hand navigation). Click on the link for the page you wish to remove the comments. This will bring you to the edit screen for that particular page.
  • The comment settings are in a section labeled Discussion. By default, Discussion is typically not visible. To make it appear, you will need to click the tab in the top-right corner of your screen for Screen Options. A drop-down menu will appear. Check the box for Discussion. Now scroll down the page.
  • You should now see a box for Discussion at the bottom of the page. Uncheck both options in Discussion. Then Save/Update your page. Repeat as necessary for all pages you wish to hide comments on.

Back To Top

Posts

Setup the Blog page

  • By default, Clay will display your latest posts on the homepage. If you are using the homepage as seen in the demo, you will also need to create a page to display the blog.
  • First create a new Page and name it something like Blog or News. As you're creating this page, select the "Blog" template from the Page Template section in the far right column.
  • After creating the new Blog page with the Blog template, go to Settings/Reading (in the left navigation menu). For "Front page displays", choose "A static page", and for "Posts page" select the new Blog page from the drop-down menu. Then click Save Changes.

Post Meta Data - Theme Options / Posts

  • You can choose to display or hide the following meta data from each post: Author, Date, Category, Tags, Comment Count.
  • To display each feature, check the box to display, or uncheck it to hide it.

Post Featured Image - Theme Options / Posts

  • It is recommended to use the Featured Image when creating a new post. The Featured Image will display a thumbnail alongside the post on the main blog page and any blog archive pages. The optimum size for a Post Featured Image is 870px width x 325px height.
  • By default, the Featured Image will also be displayed at the top of the individual post as well. If you choose to turn off this second feature, you can uncheck the box for Display Featured Image on posts.
  • In either case, you can still use the Add Media button to add an image anywhere within your page.

Show Full Posts - Theme Options / Posts

  • Check this box to show full posts instead of excerpts on blog and blog archive pages. (Note: this will not display full posts on the homepage template page--that will only display excerpts.)

Author Bio

  • To edit the Author Bio found at the bottom of every post and also on the author archive page, go to Users/Your Profile (in the left navigation menu). Scroll down to Biographical Info and enter your bio here. Click Update Profile.
  • A Gravatar account will be needed for your User profile image. If you already have a Gravatar account, whatever image you've uploaded to your Gravatar account will be displayed on the front-end of your site. If you do not yet have a Gravatar account, you will need to create a free account and use it to add an image to your email address. Please note: changes to your Gravatar (such as uploading an image) typically take several minutes before you will see them live on your site.

Back To Top

Portfolio

Setup the Portfolio page

  • Create a new Page and name it something like Portfolio. As you're creating this page, select the "Portfolio" template from the Page Template section in the far right column.
  • Images and text added to the Portfolio Template page will not be shown. If you wish to use the Portfolio page as one of the Featured Pages on the homepage, text should be entered into the Portfolio page Excerpt section. For more info on using the Excerpt, see the Page Excerpt section.

Choose the post Category to be displayed on the portfolio page - Theme Options / Portfolio

  • Go to the Theme Options / Portfolio section and select the Category you wish to display on the Portfolio page. Sub-categories (child-categories) will also be displayed.
  • Posts used for the selected Portfolio category should have a Featured Image designated. The featured image will then be displayed on the main Portfolio page.
  • By default, the Featured Image will also be displayed on the individual Portfolio page. If needed, you can turn off "Display Featured Image on posts" from Theme Options / Posts.

Images and text

  • Images and text can be added as needed to the individual Portfolio post the same as any other post.

Back To Top

By default, any new page created will be adding to the navigational menu in the order created. If you wish to have greater control over your menu, go to Appearance / Menus

  • In the right-hand column, add a "Menu Name" and click Save
  • Next, in the left-hand column, select your newly created menu from the Theme Locations / Primary Menu drop-down and click Save
  • The left-hand column gives you options for adding pages to your menu. Scroll down to the "Page" section and click the "View All" link. Here, check the pages that you wish to add, then click "Add to Menu".
  • The selected pages will all be added to the right-hand column. Drag and drop them into the desired display order. It is possible to inset a page underneath and to the right of another page. Doing so will create a drop-down option.
  • When all of the pages are in the desired order, click Save Menu.

Back To Top

Widgets

Content for your Sidebars and Footers are handled through Widgets. To access Widgets, go to Appearance / Widgets (in the left navigation menu).

  • There are three Sidebars: Main Sidebar, Page Sidebar, and Post Sidebar.
  • Main Sidebar is the default Sidebar. If you are planning on displaying the same content on both Pages and Posts, Main Sidebar should be used.
  • If Page Sidebar or Post Sidebar are left blank, they will default to displaying whatever is in Main Sidebar.
  • If you wish to display different content on either Pages or Posts, you can add different widgets to either. the Page Sidebar will display on any pages created with the Default page template. The Post Sidebar will display on any individual post, the main blog page, and any post archive pages.
  • The Footer Widget section will display widgets in the footer of your site for every page/post other than the homepage.
  • The Homepage Footer Widget section will only display widgets in the footer of the homepage.
  • Widgets from the Available Widgets column can be dragged into any of the Sidebar/Widget sections. It is possible to reuse a Widget in multiple locations.
  • The Text Widget is a powerful option. You can enter a text message to display in one of the sections. You can enter HTML into the Text Widget. You can also add an image to a Text Widget. To add an image to a Text Widget, first add it to the Media Library. Then, enter the URL path to the image into the Text Widget in HTML. For example:
    <img src="http://yourdomain.com/wp-content/uploads/2013/06/yourimage.png">

Back To Top

Shortcodes

Clay comes with simple to use shortcodes built right in, such as buttons and columns. Shortcodes can be added to any Page, Post, or Widget. To use the shortcodes, follow the instructions below.

Buttons

Button shortcodes can be added to any page, post, or widget. To add, use the following:

[button url="http://clay.bottomlessthemes.com/" label="Example Button" color="#2a9a75" target="_blank"]

EXAMPLE BUTTON

The button shortcode supports 4 attributes: url, label, color (optional), and target (optional).

Columns

Columns shortcodes can be added to any page, post, or widget. Columns can be created as one half, one third, two thirds, or one fourth of the content area’s width. To add, use the following:

[one_third] Example content 1 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing. [/one_third] [one_third] Example content 2 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing. [/one_third] [one_third_last] Example content 3 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing. [/one_third_last]

Example content 1 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.Example content 2 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.Example content 3 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.

Notice the addition of "_last" to the last column's shorcode. This is necessary for the columns to display properly.

Images can be inserted into the column shortcode and HTML can also be used (such as links or bold/italic text).

Back To Top

CSS

The main CSS file is the style.css file bundled with the theme. It is not recommended to change this file as any modifications will be lost if the theme is updated. Instead, please put new CSS rules in the Theme Options / General / Custom CSS field. It is possible to write new CSS rules there that will override any other CSS rules on the site. Data input there will be retained if the theme is updated to a later version.

Back To Top

Notes

SEO Titles

If you opt to import the demo data, this will also include the demo site's SEO. To change it, you can install the Yoast SEO plugin. Once installed and activated, you can go to the edit screen for the page you wish to update (most likely your Home page). Scroll down to the Yoast SEO section. Click the Edit Snippet button. From there, you can update the SEO Title and Meta Description sections. When finished, click the Update button. Repeat for as many pages as needed, but most likely, you will want to do so for both your Home page and your Blog page.

Jetpack Mobile

If you opt to activate Jetpack, it's possible that its Mobile feature will be activated automatically. As Clay is mobile responsive by default, it's not necessary to use Jetpack Mobile. You can simply go to Jetpack / Settings and deactivate Mobile, or, if you're not using the other Jetpack features, you can go to Plugins and deactivate Jetpack altogether.

Back To Top

Credits

I've used the following images, icons or other files as listed.

Back To Top

Thank you again for purchasing Clay! I hope you enjoy using it as much as I enjoyed making it! Feel free to contact support with any questions or comments you may have.

-Adam

Back To Top