20 Jun 2013
All the Themify themes include a Themify Custom Panel (for post/page options), Customizer (for theme styling), and Builder (for post/page layout). Sometimes, you might want to restrict certain uers to have access to them.
You can do that at Themify > Settings > Role Access.
20 Jun 2013
Since Themify Framework version 1.3.5, we rolled a new gallery system to all themes that includes both lightbox and fullscreen swipe solutions to display gallery images and also images linked to their file in the content.
The gallery receives several parameters for its initialization, and all of them are accessible and can be modified using a WordPress filter, 'themify_gallery_plugins_args'. Not only you can modify the existing parameters, but you can also add others, useful for example for the fullscreen gallery.
In this example we will show the image title in lightbox. By default this is turned off.
1. Create a file named custom-functions.php in your theme root folder
2. Edit it, and paste the following
<?php
function custom_themify_show_lightbox_title($args) {
$args['show_title'] = true;
return $args;
}
add_filter('themify_gallery_plugins_args', 'custom_themify_show_lightbox_title');
?>
3. Save the file. If you were editing it locally, upload it by FTP to the theme folder in your server.
These are the parameters that can be modified and their corresponding default values:
'theme' => 'pp_default'Sets the lightbox theme. Can be set to
'social_tools' => falseShows basic social buttons in lightbox view
'allow_resize' => trueAllows image resizing in lightbox view when viewport is smaller than image
'show_title' => falseShows lightbox title
'overlay_gallery' => falseShows mini gallery over the lightbox
'screenWidthNoLightbox' => 600Screen width after the one lightbox is no longer triggered
This is an example for the fullscreen gallery. We will disable the zoom when user double clicks or double taps the image, change the slideshow delay, and the transition speed.
<?php
function custom_themify_fullscreen_params($args) {
$args['allowUserZoom'] = false;
$args['slideshowDelay'] = 7000;
$args['slideSpeed'] = 700;
return $args;
};
add_filter('themify_gallery_plugins_args', 'custom_themify_fullscreen_params');
?>
The fullscreen gallery supports all the parameters for Photoswipe.
As an advanced example, let's see how we can tell the gallery system to look up in areas other than the default ones. Note that we're appending these selectors, otherwise the original ones won't work anymore:
<?php
function custom_themify_gallery_areas($args) {
// The links that will be lightboxed, by default, this is only .lightbox
$args['lightboxSelector'] .= ', .extra-lightbox';
// Add images support in highlights, for example on Bizco or Folo themes
$file_extensions = array('jpg', 'gif', 'png', 'JPG', 'GIF', 'PNG');
$content_images = '';
foreach ($file_extensions as $ext) {
$content_images .= ', .home-highlights-content a[href$='.$ext.']';
}
$args['lightboxContentImagesSelector'] .= $content_images;
// Add a custom post type as another area for linked images
$args['contentImagesAreas'] .= ', .type-somecustomposttype';
return $args;
};
add_filter('themify_gallery_plugins_args', 'custom_themify_gallery_areas');
?>
03 Jun 2013
Since framework 1.3.2, the image function includes a filter, themify_image_script_src, to modify the URL passed to img.php, the Image Script that crops and resizes the images on the fly in Themify themes.
To make use of the filter, follow these steps:
1. Create a file named custom-functions.php in your theme root folder
2. Edit it, and paste the following sample code
<?php
/**
* Modify URL passed to image script
* @param string $src Original image URL
* @return string $src Modified image URL
*/
function custom_theme_themify_image_script_src($src){
// Do something with URL stored in $src here
return $src;
}
add_filter('themify_image_script_src', 'custom_theme_themify_image_script_src');
?>3. Modify as needed and save the file. If you were editing it locally, upload it by FTP to the theme folder in your server.
For example, you can use this filter to remove the http:// or https:// scheme
<?php
/**
* Remove URL scheme
* @param string $src Original URL with scheme
* @return string $src Modified URL without scheme
*/
function custom_theme_themify_image_script_src($src){
$replace = array('http://', 'https://', $_SERVER["HTTP_HOST"]);
$src = str_replace($replace, '', $src);
return $src;
}
add_filter('themify_image_script_src', 'custom_theme_themify_image_script_src');
?>22 Apr 2013
The settings and tabs in Themify Panel are defined by a series of arrays declared in the file theme-config.php, located in the theme root directory.
Customization of theme-config.php definitions to add or remove tabs or settings can be performed in two ways:
Using a custom file is pretty straight forward, you need to:
You can use the themify_theme_config_setup filter to modify the theme config. For that add this to your child theme's "functions.php" file and then edit the code as desired:
<?php
function theme_themify_theme_config_setup( $arg ) {
// Unset or add new variable here
return $arg;
};
add_filter('themify_theme_config_setup', 'theme_themify_theme_config_setup');
?>
Remove General and Default Layouts side tabs
<?php
unset($arg['panel']['settings']['tab']['general']);
unset($arg['panel']['settings']['tab']['default_layouts']);
?>
Add new side tab with modules
<?php
$arg['panel']['settings']['tab']['new_layouts'] = array(
'title' => 'New Layouts',
'custom-module' => array(
array(
'title' => 'New Index Layout (archive, category, search, tag pages, etc.)',
'function' => 'default_layout'
),
array(
'title' => 'New Post Layout (single post)',
'function' => 'default_post_layout'
)
)
);
?>
Complete code:
<?php
function theme_themify_theme_config_setup( $arg ) {
// Unset or add new variable here
return $arg;
};
add_filter('themify_theme_config_setup', 'theme_themify_theme_config_setup');
?>
<?php
unset($arg['panel']['settings']['tab']['general']);
unset($arg['panel']['settings']['tab']['default_layouts']);
?>
<?php
$arg['panel']['settings']['tab']['new_layouts'] = array(
'title' => 'New Layouts',
'custom-module' => array(
array(
'title' => 'New Index Layout (archive, category, search, tag pages, etc.)',
'function' => 'default_layout'
),
array(
'title' => 'New Post Layout (single post)',
'function' => 'default_post_layout'
)
)
);
?>
<?php
function theme_themify_theme_config_setup($arg) {
// remove Setting General and Default Layout Tab
unset($arg['panel']['settings']['tab']['general']);
unset($arg['panel']['settings']['tab']['default_layouts']);
// add new settings options
$arg['panel']['settings']['tab']['new_layouts'] = array(
'title' => 'New Layouts',
'custom-module' => array(
array(
'title' => 'New Index Layout (archive, category, search, tag pages, etc.)',
'function' => 'default_layout'
),
array(
'title' => 'New Post Layout (single post)',
'function' => 'default_post_layout'
)
)
);
return $arg;
};
add_filter('themify_theme_config_setup', 'theme_themify_theme_config_setup');
?>
19 Apr 2013
By default, most Themify themes use the Date and Time settings in your WordPress > Settings. To change the date and time format used in the theme, you would go to WP Admin > Settings and select or enter your preferred format. Some themes such as Corporate, Music, ThemeMin, Pinshop, etc. have special post date styling (the circle post date design), so these themes do not use the Date and Time from your WP Settings because they require special HTML markups to output the custom design. To modify the post date in those themes, you can either create a child theme and modify the loop.php template (where the post date function is located) or add a custom function as provided below.
Note: in most themes, the post and comment date/time format is pulled from your WP Settings (read above). The tutorial below is for the themes that have special post date design such as Corporate, Music, ThemeMin, Pinshop, etc.
To modify the format of the date outputted in a post with a custom PHP function, we can use the themify_loop_date filter:
1. create a file named custom-functions.php in the theme root folder
2. open it and paste the following:
<?php
function custom_themify_loop_date($date_fmt) {
return 'l, F j, Y';
};
add_filter('themify_loop_date', 'custom_themify_loop_date');
?>
3. save it (if you were editing it locally, upload it to your site by FTP) and check your site.
The code sample above will create a date like this:
Tuesday, April 16, 2013
Here's another example for a shorter date
<?php
function custom_themify_loop_date($date_fmt) {
return 'm/d/y';
};
add_filter('themify_loop_date', 'custom_themify_loop_date');
?>
This will create a date like
04/16/13
Note that some themes like iTheme2 separate the date elements and arrange it differently in the design, as is the case with iTheme2, where the date is used to create a calendar icon next to the post name. In themes like these, this filter is not available and you'll have to modify the file containing the date, creating later a child theme to preserve your changes.
You can find more about formatting date on the WordPress Codex.
22 Feb 2013
You can assign any Page (even the query category pages) as the front page:
Please leave the "Posts page' setting default.