Quick Starter Guide
This quick tutorial will show you how to install and use Themify's WordPress themes.
1. Installing The Theme
NOTE: you need to have a self-hosted WordPress site in order to install themes (ie. you can't install themes on wordpress.com).
To install the theme:
- Download the theme zip from the Member Area. The theme zips in the Member Area are always the latest version.
- Then login to your WordPress site's admin
- Go to Appearance > Themes
- Click on the "Add New" button, then click on the "Upload Theme" button
- Upload the theme zip that you've downloaded from our server and click "Install Now"
- Click "Activate"
- If you get "upload_max_filesize" error, this means your host/server has limit file upload size. You can either request your host provider to increase file upload size or install the theme with FTP, read Installing Themes for details.
- If you get "missing the style.css stylesheet" error, make sure the zip file you select is 'theme_name.zip', not 'theme_name-psd.zip' (the psd.zip file is the Photoshop file).
2. Theme Option Panel
After the theme is activated, it should redirects you to the Themify panel (theme option page). Under the theme option panel, there are four main tabs: Settings, Skins, Transfer, and Demo Import. The theme update notification can also be found on the Themify panel page as well.
All Themify themes have auto update feature. When a theme update is available, you will see a notice above the Themify panel. On the Themify panel, you can find the theme version number on top right corner and the framework version number is located at bottom left corner.
- General Settings - Under the General settings tab, you can customize the favicon, feed URL, insert header code, footer code, set search categories, RSS feed, and Google Fonts options.
- Default Layouts -Under the Default Layouts tab, you can choose the global layout options for: archive/index pages, single post page, and static page.
- Theme Settings - Under the Theme Settings tab, you can customize the theme specific features such as WordPress gallery lightbox, exclude RSS icon, exclude search box, footer text, footer widgets, etc.
- Image Script - Under the Image Script tab, you can disable the img.php script that we use to dynamically generate the featured image sizing.
- Social Links - Under the Social Links tab, you can manage the social media links such as Twitter, Facebook and more.
- Themify Builder - Under the Themify Builder tab, you can enable/disable the Themify Builder and to exclude certain Builder modules.
- Twitter Settings - Under the Twitter Settings tab, you can insert the Twitter API access token (note: required for Themify Twitter widget and Twitter shortcode).
- Hook Content - Under the Hook Content tab, you can add dynamic content to the theme without the need of editing any theme template file.
- Role Access - Under the Role Access tab, you can set which user role you'd like to give access to the Themify Custom panel, customizer, Builder front/backend. (Default is set to the default WordPress roles)
Under the Skins tab, you may apply one of the pre-built skins. If you want to create your own skins, read Creating Theme Skins.
Under the Transfer tab, you may backup or restore the setting data in the Themify panel. Click on Export to download the setting data for backup. You may restore the data by clicking on the Import button. The data in the option panel is stored in the database. Updating or reinstalling the them does not affect the setting data.
At any time, you may clear the Settings by clicking on the RESET settings button located at the bottom of the Themify panel.
3. Importing Demo Content (optional)
If you are starting a new site and would like to import the sample content as seen on the demo site:
- Go to Themify panel > Demo Import
- Click on the "Import Demo" button.
- A popup box will appear with the message "This will import demo and Override current Themify panel settings," just choose the "Ok" and the importing process will start.
- Now sit back and let the importing process finish.
- As soon as the importing process finishes, you will see a "Done" message and your demo content.
- Now you may edit or delete the content as you like.
Note: The Demo Import feature will import the content including (posts/pages), Themify panel settings, menus, and widgets. Due to copyright reasons, demo images will be replaced with a placeholder image. Simply upload the "Featured Image" in the Themify Custom Panel to replace the placeholder image.
Common issue: The Demo Import might not work on some servers with restrictive settings or low performance resources (ie. it blocks files from importing to the server). If the Demo Import fails, you may also import manually using WP-admin > Tools > Import.
4. Adding Posts
When adding or editing a Post, there is a Themify Custom Panel under the content editor which allows you to override the "Default Single Post Layout" set in Themify > Settings > Default Layouts. You can override the sidebar option, content width, feature image, image dimension, toggle the visibility of the post elements such as post title, date, image, etc.
To attach a featured/post image, simply click on the "Upload" button in the Themify Custom Panel or choose an image using Browse Library. The featured image is required if you want to display an image in the post excerpt mode, slider, and widgets. Read more on Featured Image.
5. Adding Pages
When adding or editing a Page, there is also a Themify Custom Panel under the content editor which allows you to override the "Default Page Layout" set in Themify > Settings > Default Layouts.
All Themify themes allow you to query blog posts on any static Page (eg. you can create a custom blog page). To query posts: on the Page's Themify Custom Panel, click on "Query Posts" tab, then select "All Categories" or any category as you like.]
Static Front Page
The default WordPress homepage is actually a blog archive page showing the latest blog posts. You may change it to a custom static Page in WP-admin > Settings > Reading (read Custom Front Page for details).
6. Using The Builder
You can build the post/page layout using the drag & drop Builder in either backend or frontend mode. Read the Builder documentation for more details on how to use it. Below is a quick guide.
A) To use the Themify Builder in backend:
- First add or edit a post/page
- Below the content editor (make sure to save or publish the post/page first), you will find the "Themify Custom Panel > Themify Builder" tab like the screenshot below
- Drag & drop the module to the column/grid to add modules
B) To use the Themify Builder on frontend:
- View any post or page on the frontend (NOTE: WordPress default homepage is actually a blog archive page, you would need to create a static front page to use the Builder on homepage)
- On the frontend, from the top admin bar (make sure your Toolbar is enabled), select Themify Builder > Turn On Builder
- You will see the module panel slide up and a grid on the page
- Drag & drop the module to the grid to add modules
7. Customize Panel, Site Logo, and Tagline
The Customize panel allows you to customize the appearance of the theme (eg. font, background, color, border, position, spacing, custom CSS, etc.).
To access the Customize Panel:
- Go to WP-admin > Appearance > Customize
- On the Customize, there are "Basic" and "Advanced" tab:
- Basic = show only the basic options which is good for beginners
- Advanced = show all styling options which is good for experienced users
- Read Styling for more details on how to use the Customize Panel
Common confusion in Customize Panel:
- If you try to style something, but it is not reflecting on the preview window: it could be something else overriding the styling. Note that if you are using the Builder to style the module layout, the Builder styling will have higher priority. You may contact our Support team if you find the Customize panel not working.
To display a logo image instead of text:
- Go to WP-admin > Appearance > Customize > Themify Options > Site Logo & Tagline
- Under "Site Logo", select "Logo Image" radio button
- Click on the plus (+) sign button, and upload a logo image
- You can also use custom site logo link (optional)
- Specify the image width and height
A) To edit the Site Tagline using the WordPress settings:
- Go to wp-admin > Settings
- Edit or remove the text in the Tagline field
B) To edit the Site Tagline using the Customize panel:
- Go to Appearance > Customize > Themify Options > Site Logo & Tagline
- Scroll down to the "Site Tagline" section and you will see option to display Tagline as "Text, Image, or None"
- Enter the text in the Tagline field (alternatively you can choose to display an "Image" or "None" by selecting the radio button options)
- Under the Tagline field, you can customize the font styling, color, and text formatting
8. Custom Navigation Menus
To customize the main menu navigation:
- Go to WP-admin > Appearance > Menus
- Select a menu to edit or click on the "create a new menu" link to create a new menu (eg. Main Menu).
- Add the menu items from the left panels (Pages, Links or Categories etc)
- To create sub-level (dropdown) menu links, drag the menu item slightly toward the right (the item(s) will be indented)
- When you are done adding the menu items, on the "Theme locations" > check "Main Navigation" checkbox to assign this menu as the main site menu
- Click "Save Menu" when you are done
- Tips: the custom menu can also be used with the widget (go to Appearance > Widgets and drop in the Custom Menu widget)
If you need to show a different menu on different pages, we have the Conditional Menus plugin. As the name suggests, this plugin allows you to have different menus in different posts, pages, categories, archive pages, etc.
A) To add/remove widgets:
- Go to Appearance > Widgets
- Drag the widgets from the Available Widgets panel located on the left side to the widget area panel on the right (eg. Sidebar, Social Widget, Footer Widget, etc.)
- To remove the widgets, drag the widget from the widget area panel back to the Available Widgets panel. If you want to keep the widget setting for future use, drag it to the Inactive Widgets instead of the Available Widgets panel. It will save your widget settings. To retrieve the widget, drag the widget from Inactive Widgets panel instead of the Available Widgets panel.
B) To add widgets using Customize with live preview:
- Go to Appearance > Customize
- Choose the widget area, where you want to add/remove widget.
- Now click on "Add a Widget" button.
- A list of all the available widgets will appear, now select the desired widget.
- The selected widget will be added to the widget area.
- Give the title to your widget, and your widget will go live on your site (note: it might takes a few seconds for the widget to populate in the preview window).
10. Footer Credit Text
To replace the footer credit links:
- Go to WP-admin > Themify panel > Settings > Theme Settings and enter any text in "Footer Text 1" and "Footer Text 2" box
- HTML tags are allowed in the Footer Text.
- To have empty footer text, enter a blank space in Footer Text.
The theme also comes with a bunch of shortcodes such as: button, columns, quote, map, video, Flickr gallery, Twitter stream, post slider, list posts, box, and author box, etc. Read the shortcodes documentation, for more details on how to use and integrate them in your posts/pages.