Foundry – WordPress Theme

Contents

1. Foundry Videos

2. How To Install Your Theme

3. Installing Theme Plugins

4. Installing WooCommerce

5. Importing Demo Data (Auto Method)

6. Importing Demo Data (Fallback Method)

7. Initial Theme Setup

8. Troubleshooting Your Installation

9. Foundry Theme Options

10. Setting Up A Logo

11. Foundry Google Fonts

12. Modifying Fonts & Font Colours

13. Theme Post Type Options

14. Foundry Visual Composer

15. Assigning Visual Composer to Portfolio/Ebor Mega Menu Pages

16. Foundry Portfolio Posts

17. Team Posts

18. Client Posts

19. Foundry Mega Menu

20. Creating a Google Maps iFrame

21. Contact Form 7 Overview

22. How To Rate Your Theme

23. Theme support Policy

1. Foundry Videos









2. How To Install Your Theme

To install your theme in WordPress you must navigate to the menu „Appearance“ on the left and then the submenu „Themes“. From that page you should see your current theme „Twenty Eleven“ by default OR whatever theme you currently have. Now click the „Install Themes“ tab and then the text button at the top „Upload“. You then should click Choose File and find your theme files on your computer and upload them. Note: You are only uploading the folder „themename.zip“ Your final step is to „Activate“ your theme.

This process is shown in the images below

By default the pagenames will be website.com/p15 instead of website.com/about.

To fix this go to "Settings" > "Permalinks" and change to "Post Name". After choosing „Post Name“, Click „Save Changes“ and your done. Your urls will now display a proper Permalink structure.

3. Installing Theme Plugins

When you first install the theme you’ll see a popup on your dashboard from the theme asking you to install a number of plugins.

Allow the theme to install these for you. The plugins which are installed are dependent of the theme, the images below are for illustrative purposes only.

4. Installing WooCommerce

Your theme is ready for WooCommerce if you need eCommerce in your theme. There’s 2 steps to set this up, but you should also consider installing my demo data with WooCommerce pages and posts to make your life easier after setting up the plugin.

Install WooCommerce

Go to “plugins” => “add-new” => “install” and search for WooCommerce & then run the installer.

Run the Woo Setup Wizard

Once activated, WooCommerce will take you to a setup screen – simply follow along each set of options and allow WooCommerce to install and setup the pages for you.

Install WooCommerce Demo Data

By far the easiest way to use WooCommerce is to first install the WooCommerce demo data and then configure it to your needs, you already have all the required WooCommerce pages installed so now we just need to populate them.

Head to the Demo XML Data folder in your download, the data we’re after is called woocommerce.xml

For details on importing this data, head to the Installing the demo data section of this documentation.

WooCommerce is now set up

That’s all you need to do to get a fully functioning shop within your theme, with the WooCommerce pages installed and with the WooCommerce demo data installed you’re ready to rock.

You may want a little more help with how to use WooCommerce though, well your theme does not modify any of the default WooCommerce methods of working, so by far the best resource for WooCommerce now is that already written by WooThemes themselves, below is a selection of links worth visiting;

Getting Started with WooCommerce

Full details of how to add and manage your product base;

Adding and managing products

Handling digital downloads;

Digital Downloads

Adding / managing coupons with your store;

Coupons

Finally, if you really need some 101 help with WooCommerce, WPTuts did a great mini-series which you should take a read of;

WooCommerce 101

5. Importing Demo Data (Auto Method)

Importing Demo Data (Auto Method)

To use demo demo data installer go to "appearance" => "customise" from your WP Dashboard. Inside the customiser (this is also the theme options panel, you can modify loads about the theme from here) click on the "Import Demo Data" tab. Next click the "Import Demo Data" Button, a backup prompt will appear, click OK when you’re ready on this, and then leave your install until you get a successful message. This process takes up to 15 mins. Do not do anything during this process!.

Developers: If you have wp_debug set to true, this process will fail, set to false whilst importing demo data.

6. Importing Demo Data (Fallback Method)

I have created a folder labeled "Demo XML Data" which contains an export for the Live Preview. The place to upload this XML file is in WordPress under Tools > Import.

Once you’ve arrived on the Import page, you will click on the „WordPress“ link: WordPress – Install the WordPress importer to import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.

The first time you do this you will get a pop-up prompting you to install the „WordPress Importer“. You will need to click „Install Now“. Then You will have installed the plugin and need to click „Activate Plugin & Run Importer“.

From here you will just need click „Choose File“ and select the demo-data.xml file. Then click „Upload file and import“.

You will then be prompted to Assign Authors. You can read the description at the top as this explains everything. Note: Make sure you Import Attachments.

Check the box „Download and import file attachments“. This will download attachments for images included in the Live Preview demo.

You now just need to wait for the importer to finish. This might take a few minutes depending on your hosting server speed.

7. Initial Theme Setup

From your WP Dashboard go to "settings" => "reading" and click the "static homepage" option. Let’s set the „home page“ to any of the „home layout“ pages, and let’s set the „posts page“ option to „blog“, once you’ve done this hit the save changes button. You now have a proper homepage, and a proper blog page, nice one 🙂

Now the last step. Go to appearance -> menus and set the theme menus in place. Use the checkboxes at the bottom of the menus to set them in location. Set the main menu into the primary location.

8. Troubleshooting Your Installation

  1. Demo data installed correctly, but there's no imges? You either forgot to import attachments when installing demo data, or your server is configured to not allow incoming attachments. You’ll need to go through the theme, posts, portfolios and set featured images accordingly.
  2. Seeing a red warning where a revolution slider should be? You just need to import the demo slider included in your themes Demo XML Data folder provided in your package (see video above).
  3. No Menus?! Help! This is simple, go to appearance -> menus and set your registered menus to a theme location.
  4. I'm getting 404 errors on posts & pages. See the permalinks section of this documentation.
  5. My site is slow to load & pages. See this article.

9. Foundry Theme Options

Foundry offers a variety of options which give you total control of the themes colour schemes, fonts as well as archives for your projects and posts etc – here were going to explore what we have provided.

Colour Options

This is where we give you control over the overall style of Foundry, allowing you to set everything from background colour schemes to to your own custom highlight colours for links etc. With these options you have give Foundry the perfect scheme to complement your brand/site in no time.

Style Settings

Here we provide an area for you to control your fonts and favicons, as well as an area where you can really get creative by adding your own CSS styling. For more on how to use the fonts area, please visit https://tommusrhodus.ticksy.com/article/4603

Header Settings


This area allows you to choose an overall style for you header from the styles seen in the demo, as well as where you can add your own custom logo.

The Sub-Header settings within this area allow you to setup the header call to action button as well giving you the choice of several social profile icons you can use.

Blog Settings


This is where you control the post archive (the page created by WP to display your latest posts) – you can choose an overall page layout as well as the display style of your blog posts. You can also set the blog heading text and background image from here.

Portfolio Settings



These settings allow you to control how your portfolio archive is shown (typically yoururl.com/portfolio) – like above you can control the header background and text, as well as pick from the many available layouts to show your work off in style.

Footer Settings



Here you can select your ideal footer layout as well as add your own text and social icons.

10. Setting Up A Logo

Head to the theme options and open the header settings & logo area, use the appropriate logo controls within.

The recommended logo height for the theme is 63px, width can be anything but remember that the logo may bump into your navigation if it’s width is too high.

Heads Up!

In your theme you can adjust the logo size (height) in the same area that you upload your logo! Sweet!

Heads Up!

Your retina logo needs to have @2x on the end of the filename. Because of the way WordPress handles media attachments, make sure your logo filenames are truly unique so that the retina logo can be swapped properly

11. Foundry Google Fonts

Heads Up!

Please read this section carefully if you plan on changing the fonts used by the theme.

Google fonts are the only tricky part of the theme options, the reason for this is that we’ve chosen a simple integration of this rather than a huge resource-hogging implementation that’s going to slow your server down. The negative of this is that our font control option is a tiny bit trickier than some others, but hey, you probably only change your fonts once and my implementation makes your server faster than most themes!

Foundry gives you 2 areas that you can change the font for, Body and Headings, if you want a fast page load, make these all the same font, if you use 2 different fonts be prepared that this means 2 times the font data to download.

Ok, here’s how you change your theme fonts to another Google Font:

  1. Navigate to the fonts section of the theme options via „appearance“ -> „customise“ => „Foundry: Styling Settings“ -> „Fonts“
  2. In the description of the „fonts“ section, click the link to take you to the google fonts website
  3. Whilst on the Google fonts website, try to just choose 1 font at a time to save you some hassle.
  4. To choose a font, click the „Add to collection“ button, once you’ve done this you’ll get a grey bar on the bottom of the page, click the „Use“ button.
    Click this button to add the font to your „collection“, only do this with one font at a time!

    Click the use button to advance to the next steps.
  5. In the next window you can review the font weights you wish to include, and any font-subsets you may need, check boxes for these, but do it sparingly!
  6. Now see step 3 & 4 on the Google Fonts page you’re currently viewing, first let’s use step 4 to fill in our „Font“ option, so if step 4 says this:
    font-family: 'Open Sans', sans-serif;
    Then we just want to use the value that’s inside the quotations, so we would enter this for our option:
    Open Sans
  7. Next, let’s use step 3 to fill in our „Font URL“ option, from step 3 click the „@import“ tab (it’s easier to look at) and see the font URL like this:
    @import url(https://fonts.googleapis.com/css?family=Open+Sans);
    From that, we’re just interested in the actual URL, so in the theme option we’d add:
    <a href="https://fonts.googleapis.com/css?family=Open+Sans" rel="nofollow">https://fonts.googleapis.com/css?family=Open+Sans</a&gt;

That’s it! Save your options and if you’ve done this correctly your fonts will update to your new choices, you can’t really go wrong here, but see the default values below if you need to roll back and start again.

Here’s the default settings for this area:

Body Font: Open Sans
Body Font URL: https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700
Heading Font: Raleway
Heading Font URL: https://fonts.googleapis.com/css?family=Raleway:100,400,300,500,600,700

12. Modifying Fonts & Font Colours

To modify fonts & fonts colours, you’ll want to install the Easy Google Fonts plugin, it’s fantastic.

Advanced: for very specific font control, you can add additional selectors to the plugin if you need to. To do this have a watch of this video:

13. Theme Post Type Options

Our themes allow you to control the urls used for the provided post types (such as team, portfolio etc). The Post Type Options page can be found within Settings in your WP admin area.

By standard, the usual url for your portfolio items would be yoururl.com/portfolio – however, using the provided area you can replace ‚portfolio‘ with whatever slug you wish to use! The same principal applies to other post types also, depending on the theme in use.

Once you have changed your slug you may recieve a 404 error when trying to access your items, to remedy this, simply head to Settings > Permalinks and hit save. This refreshed WP permalink settings and should resolve this for you.

14. Foundry Visual Composer

15. Assigning Visual Composer to Portfolio/Ebor Mega Menu Pages

Since Visual Composer 4.8 – the process of activating VC for use on custom post types such as Portfolio items or Mega Menu Items (depending on your theme) has slightly changed.

The area can now be found under the Role Manager Tab within the Visual Composer settings area

Once here, navigate to the Post Type dropdown and switch from Pages Only to Custom – this will then allow you to check each post type you wish to enable Visual Composer on.

16. Foundry Portfolio Posts

USING FOUNDRY PORTFOLIO

The theme offers a very flexible and powerful portfolio section to handle your projects with ease.

To begin, navigate to the portfolio area within your WordPress dashboard. This can be found under Portfolio on the main menu

To give you the ultimate level of control, this theme leverages to full power of Visual Composer to let you control exactly what your portfolio items look like and what information is shown.

The main method of showing your images uses the WordPress gallery function, so you can create a gallery and display it as you wish by following along this with video.

Heads Up!

A single portfolio post represents a singular image within the portfolio post feeds on the site. Portfolio posts are automatically show at /portfolio/ on your site, though you can use the page builder to add these to a page instead.

Portfolio posts function exactly in the same way as blog posts. Any additional features of a portfolio post can be modified in the additional portfolio settings section underneath the WP Editor when making a portfolio post, take a look through these options, and make a mental note of what they offer.

Heads Up!

Each Portfolio post MUST have a featured image set. This image should be a minimum of 440px X 330px and should have a maxiumum width of 2000px

To set a featured image, head to the lower right corner of your portfolio editor and hit the ’set featured image‘ link – this will then take you to your media library where you can choose the image or upload a fresh one to reprasent this project throughout your site.

17. Team Posts

Heads Up!

Team posts are automatically show at /team/ on your site, though you can use the page builder to add these to a page instead.

Team posts work just like blog posts. Ensure each team post has a featured image set. You’ll also want to set a job title, and some social icons for each team member using the additional inputs underneath the WP Editor/

18. Client Posts

Client posts are a useful way of adding some client logos to your page, set the logo as the featured image, set the client name as the title, and add a client URL if you want the logo to link somewhere.

19. Foundry Mega Menu

Whilst there are many methods of handling mega menus, Ebor Mega Menu offers the ultimate level of flexibility by allowing the use of Visual Composer to create sublime, multi column drop down menus to create the exact navigation you want with very little effort. Where Ebor Mega Menu differs from the crowd is we utilize the power of WordPress custom posts to give you the freedom to use whatever content you want, however there are a few steps which need to be taken during the setup of your theme to accommodate this.

Activating Visual Composer For Mega Menu Items

Once you have installed your theme (described above), if you have imported the demo data, when you view a Mega Menu item you will notice the content area shows a series of shortcodes and not the lovely Visual Composer UI (see image below).

To remedy this you will need to manually activate the awesome Visual Composer to allow it to be used when creating/editing menu items. To begin, head to the Visual Composer area in your WP admin area (1) and tick the box labelled mega_menu (2) to activate Visual Composer.

Once complete, you will have the full power of Visual Composer available to you and the Menu Item editing page will look like this.

Ading Menu Items via The WordPress Menu System

Adding your Ebor Mega Menu items to your sites navigation is much the same as adding a post or a page, however you will need to enable the Ebor Mega Menu items in your WordPress dashboard first. To do this, head to Appearance > Menus and at the top right of the screen you will see a tab called ‚Screen Options‘ (1), open this up and you will see a range of content that you can add to the menu, however in this case simply check the box for ‚Ebor Mega Menu‘ (2) and you will see the items now available for you to drag and drop into your desired menu.

20. Creating a Google Maps iFrame

When using the Google Maps page builder block, you will need to use the iframe supplied by Google to create your map.

Creating this iframe is simply, but not very clear.

Simply hit the menu icon on the upper left of the screen, then hit Share and within the popup that appears, select the embed tab – this will give you the iframe code as needed

21. Contact Form 7 Overview

Contact Form 7 is our recommended form plugin for WordPress. It is a simple but powerful form creator for WordPress. Here we will show you how to use Contact Form 7 to create and edit a basic form.

After Contact Form 7 is installed, you’ll find a new menu item in your WordPress admin area called Contact, here is where your forms and created and edited. From the Contact main screen, you will see your first contact form, its usually a default form called ‚Contact Form 1‘ OR if you have imported the demo data for our theme you may see a few forms that we have made specially for you.

When creating and editing forms CF7 uses simple shortcodes (in WordPress these shortcodes are words surrounded by square brackets like “[” and “]”) – these shortcodes are generated via the ‚Generate Tag‘ area (marked in red) and then placed in the form builder area (marked in blue) – you can also add your own HTML to the form for extra control.

22. How To Rate Your Theme

23. Theme support Policy

Hey There! Please Read The Following:

These Tickets are not for Customisation requests (theme modification, behaviour changes, moving elements, 3rd party plugin integration etc.) Any ticket relating to customisation will be politely forwarded to — https://www.tommusrhodus.com/contact/ — and then your ticket will be closed.

„style.css is missing“ scroll to the bottom of this message for the answer.

Want your site to load more quickly? A good web host is the best way to do this, we recommend and use WPEngine for all our theme demos.


I run support Weekdays 9am – 5pm GMT. You can expect a response within 12 – 48 hours, Monday to Friday unless there is a national holiday. Here is a list of UK national holidays: https://www.gov.uk/bank-holidays. Note that „bumps“ to tickets put you to the back of my queue, be patient, every ticket is answered promptly.


What these tickets are for:

Help using theme features, bug reports & reasonable feature requests for future updates. Need to update your theme? See here: https://www.tommusrhodus.com/updating-wordpress-them…

What these tickets aren’t for:

Any issues relating to 3rd party plugins not recommended by the theme, theme customisations, or theme changes your client requires.

What counts as customisation?

If you want to change the appearance or functionality of the theme by editing or extending the theme’s code, then that is customisation, and will not be supported through these tickets. Likewise if your client has a function request that does not exist in the theme, these tickets are not the place to have the theme extended for this.

Do you need customisation work?

If that’s exactly what you’re here for, you can fill out a custom work form here; https://www.tommusrhodus.com/contact/

Things to check when leaving a ticket:

  1. You must leave a link to your site, if not we will ask you to do this anyway and it will result in a delay to your ticket.
  2. Please be descriptive when leaving a ticket, use screenshots if possible, „doesn’t work“ is not an acceptable descriptive term and you will be asked to explain further.
  3. Disable all non-theme-recommended plugins, undo any code changes, and ensure you’re using a default, unmodified version of the theme files. You’ll find a lot of the time this fixes your issue.
  4. Tickets without a validated purchase will not be answered. Properly validate your purchase.
  5. If you have a modified theme, or are using a child theme for modification, we cannot help with bugs. Please present bugs to us within the default, unmodified theme, and we will help every time!
  6. Please note Envato’s Licensing covers 1 URL per 1 purchase of a theme: https://themeforest.net/licenses/regular – ticket profiles covering multiple URLs with 1 license code, will be stopped until the remaining licenses are provided.

Cheers & Thanks again for your purchase!


A quick point on theme support: All of my themes are tested and thoroughly scrutinised by themeforest support staff and are confirmed 100% working, if you’re having any issues you should be 99.9% sure it’s a user error, or a bug I will be happy to fix with you. With this in mind, please keep your tone calm & professional, you will always get the same from me. Any tickets left with vulgar language, or with threatening, unprofessional language will be promptly closed and/or deleted. All tickets left with a calm, professional tone will receive awesome support, as always.


„style.css is missing“, no it isn’t, one of two things has happened and I can help you with both:

  1. You’ve bought a HTML template. Was your purchase under $17? Then you’ve not bought a WordPress theme, you’ve bought a HTML template, contact Envato support, they can help: https://support.envato.com
  2. You’ve uploaded the main theme .zip, instead, unzip this, inside you’ll find documentation and another .zip called themenameWPTheme.zip <= this is what you should be installing.