30 Jul 2014

Styling

/ 0 Comment

Welcome to the Customize Panel Documentation, this guide contains everything that you need to know about Themify Customize Panel. It covers the entire set of features available under the Customize Panel and will guide you on how to use them, effectively.

The video covers a brief introduction and demos of all of the features available in the Themify Customize panel.

We had used the Basic theme as a base for this documentation, other themes may have different elements, however most will have the following settings available.

Structure

Themes are structured with specific areas which you can customize in the Customize Panel, here is the structure of a standard Themify theme:

How to access Customize Panel

You can acess the Themify Customize Panel from the back-end, as well as from the front-end of your site.

1. Back-end

• Go to WordPress Admin > Appearance > Customize

2. Front-end

• Navigate to the Top Admin Toolbar > Customize

Customize Panel

In the Customize panel you will see the following tabs:

• Body
• Layout Containers
• Headings
• Forms
• Header
• Site Logo & Tagline
• Main Navigation
• Post
• Page Title
• Sidebar
• Footer
• Custom CSS
• Reset All Customization
• Responsive Styling
• Static Front Page
• Widgets

Body

The Body tab of the Customize panel is for altering the main body font of the theme, this is the main font style that all other text elements will inherit from. Some of these settings will be overridden in the other styling settings, such as post titles, etc.

The above is an example of the body font, however all text elements may inherit attributes set in the Body tab.

There are multiple sections under the Body tab:

• Body
  • These are the properties applied to the entire body section of your site.
• Body Font
  • These are the properties applied to the body font as standard.
• Body Link
  • These are the properties applied to the body font when a link is shown.
• Body Link Hover
  • These are the properties applied to the body font when a link is hovered over by the user.

The properties present in the Body tab are covered in the Customize Properties - Background, Fonts, and Borders & Spacing.

Layout Containers

The Layout containers tab is to customize the various containers or sections of the theme such as page wrap, page width, middle, content, and sidebar containers.

• Page Wrap
  • These are the properties applied to the page wrap container of the theme.
• Page Width
  • These are the properties applied to the page width container of the theme.
• Middle Container
  • These are the properties applied to the middle container of the theme.
• Content
  • These are the properties applied to the content container of the theme.
• Sidebar
  • These are the properties applied to the sidebar container of the theme.

The properties present in the Layout Containers tab are covered in the Customize Properties - Background,and Borders & Spacing, section.

Headings

The Headings tab of the Customize panel is for applying styling to the heading tags (H1 to H6) in your content. Note that styling the heading tags might also affect the heading tags used in the templates (eg. the post title also uses H2 or H1 tag).

The properties present in the Heading tab are covered in the Customize Properties - Fonts section.

Forms

The Forms tab of the Customize panel is for applying styling to the various forms found on your site.

There are multiple sections under Form tab:

• Form Fields
  • These are the properties applied to the form fields as standard.
• Form Fields Focus
  • These are the properties applied to the form fields when they are selected and have focus.
• Form Buttons
  • These are the properties applied to the form buttons (such as "Submit" or "Reset" buttons) as standard.
• Form Buttons Hover
  • These are the properties applied to the form buttons when they are hovered over by the user.

The properties present in the Forms tab are covered in the Customize Properties section, using elements from Background, Fonts, and Borders & Spacing.

Header

The Header tab of the Customize panel is for applying styling to the site header.

There are multiple settings under Header:

• Header Wrap
  • These are properties applied to the entire header element of the theme.
• Header Inner Background
  • These are the properties applied to the inner background of the base header element.
• Header Font
  • These are the properties applied to the fonts of the base header element.
• Header Link
  • These are the properties applied to the links within the header element.
• Header Hover
  • These are the properties applied to the links within the header element when they are hovered over by the user.

The properties present in the Header tab are covered in the Customize Properties section, using elements from Background, Fonts, Borders & Spacing, and Width & Height.

Site Logo & Tagline

The Site Logo & Tagline tab of the Customize panel is to setting and customize the site logo, site title, and the site tagline. Site Logo Image To display a logo image instead of text:

• Go to Appearance > Customize > Themify Options > Site Logo
• 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
• To reposition the logo accordingly, choose the appropriate position from the Position dropdown, enter the values in "top," "right," "bottom," and "left" position.

Site Description (Tagline) To remove or edit the site description using Theme customizer

• Go to Appearance > Customize > Themify Options > Site Tagline
• Edit or remove the text in the Tagline field
• You can customized your site's tagline using customized fonts, text effects, alignments, and colors from the available dropdown options.

To reposition the site description:

Choose the appropriate position from the Position dropdown, enter the values accordingly in "top," "right," "bottom," and "left" position.

The properties present in the Site Logo & Tagline tab are covered in the Customize Properties section, using elements from Fonts, Positioning, Display, and Width & Height.

Main Navigation

The Main Navigation tab of the Customize panel is for applying styling to the main navigation menu.

There are multiple sections under Main Navigation:

• Main Navigation
  • Here you can select the desired menu from the dropdown to be appeared on your site.
• Menu Container
  • These are the properties to set the position of the main navigation container.
• Menu Link
  • These are the properties applied to the top-level links in the main navigation menu.
• Menu Link Hover
  • These are the properties applied to the top-level links in the main navigation menu when they are hovered over by the user.
• Menu Active Link
  • These are the properties applied to the current active page links in the main navigation menu.
• Menu Active Link Hover
  • These are the properties applied to the current active page links in the main navigation menu when they are hovered over by the user.
• Dropdown Container
  • These are the properties applied to the main navigation dropdown menu.
• Dropdown Link
  • These are the properties applied to the links in the main navigation dropdown menu.
• Dropdown Link Hover
  • These are the properties applied to the links in the main navigation dropdown menu when they are hovered over by the user.

Properties present in the Header tab are covered in the Customize Properties section, using elements from Background, Fonts, Borders & Spacing, and Positioning.

Post

The Post tab of the Customize panel is for customizing the blog post layout container, titles of the blog posts, post meta, post date, more link, post nav, and grid post titles on your site.

• Post Container
  • These are the properties applied to the post container of the posts on your site.
• Post Title
  • These are the properties applied to the titles of the posts on your site.
• Post Title Hover
  • These are the properties applied to the post title when it is hovered over the user.

• Grid4 Post Title
  • These are the properties applied to the fonts used in the Grid4 post title.
• Grid3 Post Title
  • These are the properties applied to the fonts used in the Grid3 post title.
• Grid2 Post Title
  • These are the properties applied to the fonts used in the Grid2 post title.

  

• Grid2 Thumb Post Title
  • These are the properties applied to the fonts used in the Grid2 Thumb post title.
• List Thumb Post Title
  • These are the properties applied to the fonts used in the List Thumb post title.

• Post Meta
  • These are the properties applied to the fonts used in the post meta elements.
• Post Meta Link
  • These are the properties applied to the post meta elements when a link is shown.
• Post Meta Hover
  • These are the properties applied to post meta elements when a link is hovered over by the user.
• Post Date
  • These are the properties applied to the post date elements.
• More Link
  • These are the properties applied to the more link which can be shown on blog posts when using "Full Content" display mode or a custom excerpt.
• More Link Hover
  • These are the properties applied to the more link when it is hovered over by the user.

• Post Navigation
  • These are the properties applied to the base post navigation area.
• Post Navigation Link
  • These are the properties applied to the links within the post navigation element.
• Post Navigation Hover
  • These are the properties applied to the links within the post navigation element when they are hovered over by the user.
• Post Nav Link Icon
  • These are the properties applied to the Post Nav Icon within the post navigation element.

The properties present in the Post Navigation tab are covered in the Customize Properties section, using elements from Fonts, Background, and Borders & Spacing.

Page Title

The Page Title tab of the Customize panel is for applying styling to the titles of pages on your site.

The properties present in the Page Title tab are covered in the Customize Properties - Fonts section.

Sidebar

The Sidebar tab of the Customize panel is for applying styling to the sidebar.

There are multiple sections under Sidebar:

• Sidebar Font
  • These are the properties applied to fonts in the sidebar element.
• Sidebar Link
  • These are the properties applied to links in the sidebar element.
• Sidebar Hover
  • These are the properties applied to links in the sidebar element when they are hovered over by the user.
• Sidebar Widget Container
  • These are the properties applied to the widget container areas in the sidebar.
• Sidebar Widget Title
  • These are the properties applied to the widget titles in the sidebar.
• Sidebar Widget List Styling
  • These are the properties applied to the widget list items in the sidebar.

The properties present in the Sidebar tab are covered in the Customize Properties section, using elements from Background, Fonts, and Borders & Spacing.

Footer

The Footer tab of the Customize panel is for applying styling to the footer.

There are multiple sections under Footer:

• Footer Navigation
  • This property is to select the menu to be appeared on the footer navigation bar.
• Menu Container
  • These are the properties applied to the footer menu container of your site.
• Menu Link
  • These are the properties applied to footer menu in the footer element.
• Menu Link Hover
  • These are the properties applied to footer menu when a link is hovered over by the user.
• Menu Active Link
  • These are the properties applied to footer menu when a link in the footer menu is active.
• Menu Active Link Hover
  • These are the properties applied to footer menu when an active link in the footer menu is hovered over by the user.
• Footer Wrap
  • These are the properties applied to the entire footer container of your site.
• Footer Inner
  • These are the properties applied to the entire inner footer container of your site.
• Footer Font
  • These are the properties applied to fonts in the footer element.
• Footer Link
  • These are the properties applied to links in the footer element.
• Footer Hover
  • These are the properties applied to links in the footer element when they are hovered over by the user.
• Footer Widget Container
  • These are the properties applied to the widget box areas in the footer.
• Footer Widget Title
  • These are the properties applied to the widget titles in the footer.
• Footer Widget List Styling
  • These are the properties applied to the widget list items in the footer.

The properties present in the Footer tab are covered in the Customize Properties section, using elements from Background, Fonts, and Borders & Spacing.

Static Front Page

This feature allows you to configure the front page on your site, either choose to show your latest post or a static page which, can be selected from the dropdown box.

Widgets

Using the Customize Panel, you can also add, remove or arrange the widgets on all of the widgetized area of your site.

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.

Custom CSS

The Custom CSS tab of the Customize panel is for adding custom CSS code to the theme.

In the text area provided you can add any CSS code you wish to apply to the theme, and this will be added after any other styling of the theme.

Reset All Customization

The Reset All Customization tab allows you to reset the entire customization that you made using Customization Panel on your site including the changes in the styling done using any Custom CSS codes.

Note : Be cautious while using Reset All Customization, the changes done using this feature are irreversible.

Responsive Styling

This features allows you to style how your site looks on tablet, mobile, or desktop. This feature is found at the bottom of the Customize Panel. You can toggle on what you edit by clicking on the icons.

Notes: When you edit the styling in both tablet or mobile view, you'll notice that some of the options will not be accessible. This is because some of the theme elements are not applicable, or cannot be customized, on the tablet or mobile.

Customize Properties

There are various styling properties available to be customized, and these will vary from tab to tab, however they all fit into the following categories:

• Background
• Fonts
• Borders & Spacing
• Width & Height
• Positioning
• Display

Background

Background Image: The background-image property sets an image for the background of an element. Background images can be set by one of the following methods: selecting one of the already present backgrounds from the list of thumbnails, manually entering an image URL, or uploading an image. Checking "No Background image" will remove the background image. Background Color: The background-color property sets a color for the background of an element. You can set a background color here as well by manually enter a color code, or alternatively click the box next to the field and a color picker will appear. Background Repeat: The background-repeat property sets if/how a background image will be repeated.

• Repeat = The background image will be repeated both vertically and horizontally.
• Repeat X = The background image will be repeated only horizontally
• Repeat Y = The background image will be repeated only vertically
• Do not repeat = No repeat

Background Position: You can set the position of the background image, this will determine where the background image begins - for example, setting it to right center would start the background image from the right of the element vertically centered.

Fonts

Font Size: You can set the size of the font in the text element, and select the type of units to use from the dropdown (pixels, em, %) Font Family: The font-family property sets the font for an element. Use the dropdown menu to select a font family for the text element from a list of standard fonts. Line Height: You can set the height of each line in the text element, and select the type of units to use from the dropdown (pixels, em, %) Text Decoration: The text-decoration property specifies the decoration added to text.

• Underline = Defines a line below the text
• Overline = Defines a line above the text
• Strike through = Defines a line through the text
• None = No decoration

Color: The color property sets the color of text for an element. You can specify the color by entering a color code manually or clicking the box next to the field to open a color picker. Tip: You can also set the opacity of the color in the color picker, by adjusting the drag selector up/down to the desired value in the opacity slider. Font Weight: The font-weight property sets whether text is normal or bold. Font Style: The font-style property sets whether text is normal or italic. Font Variant: The font-variant property specifies whether or not a text should be displayed in a small-caps font. Text Alignment: The text alignment property controls the alignment of text.

• Left = Aligns the text content to the left
• Center = Aligns the text content to the center
• Right = Aligns the text content to the right
• Justify = Automatically aligns the text content between both left and right.

Text Transform: The text-transform property controls the capitalization of text.

• Capitalize = Capitalizes the first letter of each word
• Uppercase = Makes all words uppercase
• Lowercase = Makes all words lowercase
• None = No transform

Borders & Spacing

Border: Use the fields to set the color, size and style of the border on each side of an element, you can set color by entering a color code manually or clicking the box next to the field to open a color picker. Select "Apply to all" to reduce options to one setting for all sides. Margin: Margin defines the space around elements. Use the fields to set the margin amount for each side of an element. Select "Apply to all" to reduce options to one setting for all sides. Padding: Padding defines the space between the element border and the element content. Use the fields to set the padding amount for each side of an element. Select "Apply to all" to reduce options to one setting for all sides.

Width & Height

Width: You can set the width of an element, and select the type of units to use from the dropdown (pixels, em, %) Height: You can set the height of an element, and select the type of units to use from the dropdown (pixels, em, %)

Positioning

Position: You can set the position of an element.

• Static = Positions the element where it is placed within the normal flow of the layout.
• Fixed = Positions the element at a set position, as set below in pixels from a side of the element (top/bottom, left/right), and it will remain here even when the page is scrolled.
• Relative = Positions the element at a position relative to its normal position.
• Absolute = Positions the element at a position, as set below in pixels from a side of the element (top/bottom, left/right), relative to the first non-static parent element.

Display

Display (Site Logo): The display property under site logo will allow you to select between two modes:

• Site Title = This will output the site's title in the site logo element.
• Image = This will output an image in the site logo element. You can select "Upload" to upload an image or enter the URL manually, and also set the dimensions of your logo here.

I switched theme (or added a child theme), all my Customize settings are gone?

Note Customize data is associated to the activated theme (ie. when you switch to another theme, the Customize options will be different). To carry the Customize data from one Themify theme to another Themify theme, use the Customize's Export and Import feature located on the Customize panel).

Also note that the activated child theme is considered as a separate theme. If you see your Customize data is gone after activating a child theme, don't panic. Simply export the Customize data with the parent theme activated, then switch to the child theme and import the Customize data.

Read More

23 Jul 2014

Deregistering Custom Post Types

/ 0 Comment

If you want to deregister custom post types in a Themify theme, follow these steps:

1. create a custom-functions.php in the theme folder if it does not exist.

2. paste this code in it

<?php
/**
 * Deregister matching post types.
 */
function custom_unregister_theme_post_types() {
	global $wp_post_types;
	foreach( array( 'portfolio', 'gallery', 'team', 'testimonial', 'highlight' ) as $post_type ) {
		if ( isset( $wp_post_types[ $post_type ] ) ) {
			unset( $wp_post_types[ $post_type ] );
		}
	}
}
add_action( 'init', 'custom_unregister_theme_post_types', 20 );

/**
 * Remove matching post types from list of post types supported by Themify.
 *
 * @param $types
 * @return array
 */
function custom_supported_post_types( $types ) {
	$removed_types = array( 'portfolio', 'gallery', 'team', 'testimonial', 'highlight' );
	return array_diff( $types, $removed_types );
}
add_action( 'themify_post_types', 'custom_supported_post_types', 77 );

/**
 * Remove matching post types from Builder module list.
 *
 * @param $types
 * @return array
 */
function custom_builder_modules( $types ) {
	$removed_types = array( 'portfolio', 'gallery', 'team', 'testimonial', 'highlight' );
	return array_diff( $types, $removed_types );
}
add_filter( 'themify_builder_modules_list', 'custom_builder_modules' );
?>

3. save the file.

In themes like Event or Music that have a custom Events widget, the widget can be removed using this additional code:

<?php
/**
 * Deregister Events widget.
 */
function custom_remove_events_widget() {
	unregister_widget( 'Themify_Events' );
}
add_action( 'widgets_init', 'custom_remove_events_widget', 11 );
?>

Read More

18 Jul 2014

Enable Styling panel

/ 0 Comment

One of the new features in the 1.8.4 framework update was indeed the Customizer which enables you to change the design settings and see the changes live. As such the Styling panel that was previously available in the theme settings page has been hidden by default (only if you haven't used it before). But if you prefer to keep the Styling options in the theme settings page you can first create a file named "custom-functions.php" in your theme's root directory and then add this bit:

<?php

add_filter( 'themify_show_styling_panel', '__return_true' );

Read More

18 Jul 2014

Quick Starter Guide

/ 0 Comment

This quick tutorial will show you how to install and use Themify's WordPress themes. NOTE: Some screenshots and features may vary from different themes as they might have different features.

1. Installing The Theme

Note: you need to have a self-hosted WordPress site in order to install themes (works on wordpress.com with Business Plan only).

To install the theme:

• Download the theme zip from the Member Area. The theme zips in the Member Area are always the latest version.
• 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"

Common issues:

• If you get "upload_max_filesize" error, this means your host/server has limited 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 selected 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 redirect 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.

Theme Auto Update

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 the top right corner and the framework version number is located at the bottom left corner.

Settings

• 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 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 to edit 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)

Skins

Under the Skins tab, you may apply one of the pre-built skins.

Transfer

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 theme does not affect the setting data.

Reset

At any time, you may clear the Settings by clicking on the RESET setting 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 "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 contents 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 (i.e. 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, and toggle the visibility of the post elements such as post title, date, image, etc.

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.

Query Posts (Blog Page)

All Themify themes allow you to query blog posts on any static page (e.g. 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 and drop Builder in either the 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.
• If you are using WordPress 5+ with Gutenberg enabled (default), you should see a Builder Block like the screenshot below.
• If Gutenberg is disabled, you will find the "Themify Builder" tab below the WordPress classic editor.
• Drag and 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 will 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 and drop the module to the grid to add modules.

7. Customize Panel, Site Logo, and Tagline

Customize Panel

The Customize panel allows you to customize the appearances of the theme (e.g. 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" tabs:
  • Basic = shows only the basic options which is good for beginners
  • Advanced = shows all styling options which is good for experienced users
• Read Styling for more details on how to use the Customize Panel.

Common confusion in the 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 is not working.

Site Logo Image

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.

Site Description (Tagline)

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 (e.g. 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).

Conditional Menus

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.

9. Widgets

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 (e.g. 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 - this will save your widget settings. To retrieve the widget, drag the widget from the 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 the 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 take 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.

11. Updating the Theme

To update the theme, you would need to install the Themify Updater plugin. A valid license key is required to update the theme.

Read More

10 Jul 2014

Enable Featured Image for Pages

/ 0 Comment

Themify themes don't show the featured image for pages in the front end, and for that reason its meta box has been disabled.

If you have a plugin or some code to show the featured image for a page, you can restore its meta box and support in the page editing screen with these steps:

1. If you're using a child theme, paste the code shown in the next step in the functions.php file. Otherwise, create a file named custom-functions.php in your theme root folder.

2. Edit the functions.php file if you're using a child theme or custom-functions.php if you're not, and paste the following:

<?php
/**
 * Removes the featured image meta box in all post types but page.
 */
function custom_themify_remove_image_box() {
	$types = themify_post_types();
	foreach( $types as $type ) {
		if ( 'page' != $type ) {
			remove_meta_box( 'postimagediv', $type, 'side' );
		}
	}
}

/**
 * Enable featured image support for image.
 */
function custom_themify_enable_page_featured_image() {
	add_post_type_support( 'page', 'thumbnail' );
	remove_action('do_meta_boxes', 'themify_cpt_image_box');
	add_action('do_meta_boxes', 'custom_themify_remove_image_box');
}
add_action( 'after_setup_theme', 'custom_themify_enable_page_featured_image' );

3. Save the file. If you were editing it locally, upload the by FTP to the theme folder or child theme folder in your server.

Read More

23 Apr 2014

Demo Import

/ 0 Comment

With the one-click import functionality in our themes, you can quickly import our demo setup to your site. This will import all the settings and content, including widgets, front page, social links, etc. from our demo (your site will have the identical appearance as our demo). Once it is done, you can keep the setup and modify the content to suit your site or you can erase the demo import.

First Install

Upon first installing and activating the theme, you will be shown the demo import popup lightbox. This popup will allow you to import the demo content - simply click import to proceed.

Demo Import & Erase

You can access the demo import on Themify > Demo Import tab. Click "Import Demo" to import the demo content. If you want to revert the demo setup, click "Erase Demo".

Read More