20 Aug 2013
http://yoursite.com/wp-admin/post.php?post=234&action=editpost=234 is the ID number (which is 234 in this case).You can also use the Reveal IDs plugin, it shows the post / page IDs in the admin edit screen.
16 Aug 2013
This documentation will guide you through all the various settings available in the Themify framework's Styling panel, and will cover all the different options available.
We will be using the Basic theme as a base for this documentation, other themes may have different elements, however most will have the following settings available.
Themes are structured with specific areas which you can customize in the Styling tab, this structure is shown below:
In the Styling panel you will see the following tabs:
The Background tab of the Styling panel is for adding images and setting the color of the various main blocks of the layout structure.
The background areas may vary based on theme, but the structure shown above is present in Basic and many of these are customizable in other themes.
Properties present in the Background tab are covered in the Styling Properties - Background section.
The Body Font tab of the Styling 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 other styling settings, such as post titles, etc.
The above is an example of the body font, however all text elements may inheret attributes set in the Body Font tab.
There are multiple sections under Body Font:
Properties present in the Headings tab are covered in the Styling Properties - Fonts section.
The Header tab of the Styling panel is for applying styling to the site header.
There are multiple sections under Header:
Properties present in the Header tab are covered in the Styling Properties section, using elements from Background, Fonts, Borders & Spacing, and Width & Height.
The Site Logo tab of the Styling panel is for setting and applying styling to the site logo.
There are multiple sections under Site Logo:
Properties present in the Site Logo tab are covered in the Styling Properties section, using elements from Fonts, Positioning, Display, and Width & Height.
The Site Description tab of the Styling panel is for applying styling to the site description.
Properties present in the Site Description tab are covered in the Styling Properties section, using elements from Fonts, and Positioning.
The Main Navigation tab of the Styling panel is for applying styling to the main navigation menu.
There are multiple sections under Main Navigation:
Properties present in the Header tab are covered in the Styling Properties section, using elements from Background, Fonts, Borders & Spacing, and Positioning.
The Headings tab of the Styling panel is for applying styling to the various heading text styles in the theme which are used in post/page content and also inherited by elements such as post titles, page titles, etc.
Headings are used when editing a post/page and also within the template wherever a heading tag is used, which means that some elements (such as post titles) will inheret some of the properties of the Headings tab.
There are different sections in the headings section for each type of heading tag from h1 to h6 and each section includes various properties.
Properties present in the Headings tab are covered in the Styling Properties - Fonts section.
The Form Elements tab of the Styling panel is for applying styling to the various forms found on your site.
There are multiple sections under Form Elements:
Properties present in the Form Elements tab are covered in the Styling Properties section, using elements from Background, Fonts, and Borders & Spacing.
The Post Title tab of the Styling panel is for applying styling to the titles of blog posts on your site.
Properties present in the Post Title tab are covered in the Styling Properties - Fonts section.
The Page Title tab of the Styling panel is for applying styling to the titles of pages on your site.
Properties present in the Page Title tab are covered in the Styling Properties - Fonts section.
The Post Meta tab of the Styling panel is for applying styling to the meta information and post date of your blog posts.
There are multiple sections under Post Meta:
Properties present in the Post Meta tab are covered in the Styling Properties section, using elements from Background, Fonts, and Borders & Spacing.
The Post Navigation tab of the Styling panel is for applying styling to the links which appear on your single post views.
There are multiple sections under Post Meta:
Properties present in the Post Navigation tab are covered in the Styling Properties section, using elements from Fonts, and Borders & Spacing.
The Sidebar tab of the Styling panel is for applying styling to the sidebar.
There are multiple sections under Sidebar:
Properties present in the Sidebar tab are covered in the Styling Properties section, using elements from Background, Fonts, and Borders & Spacing.
The Footer tab of the Styling panel is for applying styling to the footer.
There are multiple sections under Footer:
Properties present in the Footer tab are covered in the Styling Properties section, using elements from Background, Fonts, and Borders & Spacing.
The Custom CSS tab of the Styling 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.
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 Image: The background-image property sets an image for the background of an element. Background images can be set by either; selecting one of the already present backgrounds from the list of thumbnails, manually entering an image URL, or uploading an image. Checking "No BG 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, you can either 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.
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.
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.
Color: The color property sets the color of text for an element. You can specify the color by either by entering a color code manually or clicking the box next to the field to open a color picker.
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 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.
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 Transform: The text-transform property controls the capitalization of text.
Text Decoration: The text-decoration property specifies the decoration added to text.
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 'Same for 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 'Same for 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 'Same for all' to reduce options to one setting for all sides.
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, %)
Position: You can set the position of an element.
Display (Site Logo): The display property under site logo will allow you to select between two modes:
14 Aug 2013
This tutorial shows you how to insert an ad in the post archive view and single post view dynamically.
1. Create a child theme and a functions.php file in the child theme folder. If you already have a child theme with a functions.php file, skip this step.
2. Paste the following code in the child theme functions.php:
<?php
/* Define post counters and flag to know when the ad is shown */
global $themify_count_posts, $themify_index_ad_shown;
$themify_count_posts = 1;
$themify_index_ad_shown = false;
/**
* Add an add in single post view and in 3rd post in index view
*/
function custom_themify_ad() {
global $themify_count_posts, $themify_index_ad_shown;
if( is_archive() || is_home() ) {
if ( 0 == $themify_count_posts % 3 && !$themify_index_ad_shown ) {
$themify_index_ad_shown = true;
?>
<div class="themify-custom-ad themify-index-ad">
<p>THIS IS YOUR INDEX AD</p>
</div>
<?php }
$themify_count_posts++;
} elseif( is_single() ) {
?>
<div class="themify-custom-ad themify-single-ad">
<p>THIS IS YOUR SINGLE AD</p>
</div>
<?php
}
}
add_action( 'themify_post_end', 'custom_themify_ad');
?>
In themes with infinite scroll (eg. Pinboard, Grido, Metro), it will still work, but for the ad placement to be reliable, the number of posts loaded each time must be divisible by the number of posts that will be skipped before adding the ad. Otherwise the ad position will be offset each time a new set of posts is loaded.
<?php
/* Define post counter */
global $themify_count_posts;
$themify_count_posts = 1;
/**
* Add an add in index view after 4 posts
*/
function custom_themify_ad() {
global $themify_count_posts;
if( is_archive() || is_home() ) {
// The number 4 below is one that defines how many posts
// will be skipped before adding the ad.
if ( 0 == $themify_count_posts % 4 ) {
?>
<div class="themify-custom-ad themify-index-ad">
<p>THIS IS YOUR INDEX AD</p>
</div>
<?php }
$themify_count_posts++;
}
}
add_action( 'themify_post_end', 'custom_themify_ad');
?>
To give an example with the code above would be the opposite, since the ad will be added every 3 posts, the posts loaded each time should be 6, 9, 12, 15 and so on.
Then add the following code in Themify > Settings > General => Footer Code to fix the Google Ads scripts removed by InfiniteScroll script:
<script>
jQuery(document).on('newElements', function(){
(adsbygoogle = window.adsbygoogle || []).push({});
});
</script>
13 Aug 2013
When you're in a single product view, by default, clicking the main featured image will load a lightbox with the images. To remove this featured image link, follow these steps:
1. Create a child theme and a functions.php file if you don't have it yet.
2. In child theme functions.php file, paste the following code:
<?php
/**
* Remove link wrapping main product image in single product view.
* @param $html
* @param $post_id
* @return string
*/
function custom_themify_single_product_image_html( $html, $post_id ) {
return get_the_post_thumbnail( $post_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
}
add_filter('woocommerce_single_product_image_html', 'custom_themify_single_product_image_html', 10, 2);
?>
3. Save the child theme functions.php file. The thumbnails below the main image will remain unaffected, and clicking them will correctly load the lightbox gallery with these images.
23 Jul 2013
This tutorial will show you how to remove the default theme viewport tag and insert your custom viewport tag. The custom viewport tag in this tutorial will enable zooming on mobile devices.
<?php
// remove theme viewport tag first
remove_action('wp_head', 'themify_viewport_tag');
// add custom viewport tag
function themify_custom_viewport_tag() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
};
add_action( 'wp_head', 'themify_custom_viewport_tag' );
?>
02 Jul 2013
In Themify themes, there's a function that outputs the logo image and site title, themify_logo_image. This is a reusable function that can be used to output your logo anywhere in the templates. The function definition is as follows:
themify_logo_image($location, $cssid)$location, defines the location where the logo is called, used to check if the logo uses an image in theme settings (remember you can define additional setting modules) and for filter definitions.
Default is 'site_logo'.
$cssid, used for the HTML id attribute. Default is 'site-logo'.
As an example, the header logo is usually rendered as
<?php
echo themify_logo_image(); ?>while the footer logo, like in Eleming theme, is called as
<?php echo themify_logo_image('footer_logo', 'footer-logo'); ?>There are a variety of filters available to modify the output:
themify_logo_home_url, filters the URL pointed by the logo image and site title.
themify_{location}_logo_html, where location is a string, filters the full HTML returned.
Follow these steps:
1. Create a file named custom-functions.php in your theme root folder
2. Edit it, and paste the following
<?php
/**
* Return a different URL to link the logo to.
* @param string $url The original site's home URL.
* @return string The modified or different URL.
*/
function custom_themify_logo_home_url($url) {
return 'https://themify.me/';
}
// Apply filter to the logo URL
add_filter('themify_logo_home_url', 'custom_themify_logo_home_url');
?>
3. Save the file. If you were editing it locally, upload it by FTP to the theme folder in your server.
If you want to completely remove the logo output, you can use this code in custom-functions.php instead:
<?php
/**
* Return empty HTML for site logo, thus removing it.
* @param $html
* @return string
*/
function custom_themify_remove_logo($html) {
return '';
}
// Remove logo on header
add_filter( 'themify_site_logo_logo_html', 'custom_themify_remove_logo' );
// Remove logo on footer
add_filter( 'themify_footer_logo_logo_html', 'custom_themify_remove_logo' );
?>