Theme Code Snippets

All themes

Enable JetPack Infinite Scroll module

/* removed */
As alternative, you can install this plugin: https://wordpress.org/plugins/infinite-scroll/ and then configure it like so:

  • Content Selector: #loops-wrapper
  • Navigation Selector: div.pagenav
  • Next Selector: div.pagenav a:first

Restore Featured Image metabox in WordPress

Since 2.3.8 framework update, themes use the core option for Featured Image.

Change logo link

The logo by default is linked to your homepage, however sometimes you want to change the URL that the site logo is linked to, so when visitors click the logo they are redirected to a different page. go to Themify > Customize and under Site Logo section adjust the Custom Site Logo Link option.

Customizing date formats

Date formats can be customized in Settings > General from the admin menu.

Color pulse effect in footer

This creates an effect similar to what you see on the footer on Themify website, the footer changes color slowly.


#footerwrap{
	background: none;
	background-color: #45CEEF;
	-webkit-animation: colorpulse 40s infinite alternate;
	animation: colorpulse 40s infinite alternate;
}
@-webkit-keyframes colorpulse {
	0%   { background-color: #45CEEF; }
	25%  { background-color: #FFF5A5; }
	50%  { background-color: #FFD4DA; }
	75%  { background-color: #99D2E4; }
	100% { background-color: #D8CAB4; }
}
@keyframes colorpulse {
	0%   { background-color: #45CEEF; }
	25%  { background-color: #FFF5A5; }
	50%  { background-color: #FFD4DA; }
	75%  { background-color: #99D2E4; }
	100% { background-color: #D8CAB4; }
}

Use a different image size for attachment pages

WordPress by default uses the Medium image size for images displayed in attachment pages. To change that you can use this snippet


<?php
 
function custom_attachment_size( $content ) {
	if( is_attachment() ) {
		global $post;
		$content = wp_get_attachment_image( $post->ID, 'large' );
	}
	return $content;
}
add_filter( 'the_content', 'custom_attachment_size' );

Disable URL field in the comments form

In the comments form there's a text field where visitors can leave the URL to their website. If you want to hide that you can use this snippet:


<?php
 
function custom_comment_form_fields( $fields ) {
    unset( $fields['url'] );
    return $fields;
}
add_filter( 'comment_form_default_fields', 'custom_comment_form_fields' );

Custom media-queries.css file in child themes

To customize the media queries stylesheet first copy the original to the child theme's folder then add this to the child theme's functions.php file:


<?php
 
function custom_media_queries_stylesheet() {
	wp_deregister_style( 'themify-media-queries' );
	wp_enqueue_style( 'themify-media-queries', get_stylesheet_directory_uri() . '/media-queries.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_media_queries_stylesheet', 12 );

Issue with custom fonts and Firefox

Firefox has strict requirements for where the font resides in relation to the website, sometimes this causes issues where the custom fonts on your site are not loaded. To fix that you need to add this bit in the htaccess file located in the root of your WordPress installation:


<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Issue with audio playback

If you're having trouble rewinding or forwarding the audio files on your site it could mean that the Range headers for the audio file are not setup properly, more information can be found here: http://serverfault.com/questions/398219/how-can-i-enable-byte-range-request/406347#406347. You can ask your web hosting provider to fix the issue for you.

Disable image cropping

When displaying featured images for posts, if the original image is smaller than the thumbnail you want to show it gets upscaled, this is to ensure all featured images have the same dimensions however it can cause pixelation when the original image is smaller than the thumbnail. To disable this you can use:


<?php
 
function custom_theme_disable_cropping( $args ) {
	$args['crop'] = false;
	return $args;
}
add_filter( 'themify_before_get_image_parse_args', 'custom_theme_disable_cropping' );

Hide header and footer inside lightbox window

In various modules in Builder and in [themify_button] shortcode you have the option to open an external URL in a lightbox window. Using this feature you can also open any URL on your own website in lightbox, so for example you could have a link that when clicked, opens a page or a post on your website inside the lighbox window.
Now, to change the looks of your website "only" when it is inside lightbox, you can use the "lightboxed" body class the theme adds. So to hide header and footer (or any other unwanted element) in the lightbox window you can use:


.lightboxed #headerwrap,
.lightboxed #footerwrap {
    display: none;
}

Builder

Fixed headers and row scrolling

Using Row Scrolling feature in Builder (http://themify.me/docs/builder#scrollto-row-anchor), by default it scrolls to the top of the row. If your theme uses a fixed header, the header might overlap the row. To prevent this, you can notify Builder of the fixed header element, so that when scrolling it takes the fixed header into account.


<?php

function custom_builder_scroll_highlight_vars( $vars ) {
	$vars['fixedHeaderSelector'] = '#header'; /* selector for the fixed header */

	return $vars;
}
add_filter( 'themify_builder_scroll_highlight_vars', 'custom_builder_scroll_highlight_vars', 20 );

Change module title tags

Builder by default uses h3 tags for module titles, to change that you can use:


<?php

function custom_themify_builder_module_args( $args, $mod_settings ) {
    $args['before_title'] = '<h3 class="module-title">';
    $args['after_title'] = '</h3>';
    return $args;
}
add_filter( 'themify_builder_module_args', 'custom_themify_builder_module_args', 10, 2 );

Accordion Icons

You can edit the Accordion module in Builder and use the Icon option. You can set a separate icon for "closed" and "open" states.

Disable front-end editor

If you want to disable the front-end editor in Builder (without disabling Builder entirely) you can use:


<?php

add_filter( 'themify_builder_is_frontend_editor', '__return_false' );

Disable backend editor for a particular post type

To disable Builder on a given post type you can use:


<?php

function custom_disable_builder_for_posts( $args ) {
	$post_types = array( 'post' );
	if( in_array( $args['pages'], $post_types ) ) {
		return null;
	}
	return $args;
}
add_action( 'themify_builder_write_panels_meta_boxes', 'custom_disable_builder_for_posts' );

Disable backend editor for user roles

Go to Themify > Settings > Role Access and here you can configure who can access Builder editor.

Change background slider settings

To change the options for the background slider you can use:


<?php

function custom_themify_builder_script_vars( $vars ) {
    $vars['backgroundSlider'] = array(
        'speed' => 2000,
        'autoplay' => 5000,
    );
    return $vars;
}
add_filter( 'themify_builder_script_vars', 'custom_themify_builder_script_vars' );

Disable Background Video Loop

Since 2.2.6 framework update, Builder now displays an option to control the background video loop.

Disable Search in Builder

Builder by default makes content in modules searchable in WordPress' search system. To disable this feature you can use:


<?php

function custom_disable_builder_search() {
	global $ThemifyBuilder;
	remove_filter( 'posts_where', array( $ThemifyBuilder, 'do_search' ) );
}
add_action( 'init', 'custom_disable_builder_search' );

Disable cache in Builder

To disable cache feature in Builder via code, you can use:


<?php

add_filter( 'themify_builder_is_cache_active', '__return_false' );

Ultra

Slide mobile menu from top

The mobile menu by default slides from the side of the screen. To slide the menu from the top of the page you can use:


@media (max-width: 1000px) {
    #mobile-menu {
        top: -300px;
        right: 0;
        width: 100%;
        height: 300px;
    }
    #mobile-menu.sidemenu-on {
        top: 0;
        left: 0;
        right: 0;
    }
    .sidemenu-right {
        left: auto;
        top: 300px;
    }
}

300 is the height of the panel that slides down.

Display post title above post date

The post title by default is displayed below the post date, if you wish to swap their position you can use:


.post .post-content-inner {
   display: table;
}
.post .post-title {
   display: table-header-group;
}

Split

Change split scroll threshold

By default when screen size gets smaller than 600 pixels the split scrolling effect is disabled, to change this you can use:


<?php

function custom_split_scroll_threshold( $args ) {
    $args['splitScrollThreshold'] = 890;
    return $args;
}
add_filter( 'themify_script_vars', 'custom_split_scroll_threshold' );

Event

Change the display of map in events page

To change the settings of the map displayed in the event pages the "themify_event_map_args" filter can be used, for example to disable the mouse wheel zoom on the map you can use:


<?php

function custom_themify_event_map_args( $args ) {
    $args['scroll_wheel'] = 'no';
    return $args;
}
add_filter( 'themify_event_map_args', 'custom_themify_event_map_args' );

The list of options can be found here: https://themify.me/docs/shortcodes#map

Music

Custom sizes for gallery images

To change the size of the images displayed in the single gallery pages you can use:


<?php

function custom_themify_single_gallery_image_size( $size, $featured ) {
	if ( $featured && '' != $featured ) {
		return array(
			'width' => 350,
			'height' => 400
		);
	} else {
		return array(
			'width' => 350,
			'height' => 200
		);
	}
}
add_filter( 'themify_single_gallery_image_size', 'custom_themify_single_gallery_image_size', 10, 2 );

Disable album lightbox

To disable the lightbox that shows up when clicking albums you can use:


<?php

function custom_disable_album_lightbox( $args ) {
    $args['albumLightbox'] = 0;
    return $args;
}
add_filter( 'themify_script_vars', 'custom_disable_album_lightbox' );

Disable the map on events page

Disable the map displayed on single event pages:


.single-event .shortcode.map {
    display: none;
}
.single-event #content {
    padding-right: 420px;
    margin-top: 150px;
}
.single-event .event-single-wrap {
    overflow: visible;
}
.single-event .event-map {
    height: auto;
}

Open video posts in lightbox

By default when site visitors click the video titles are redirected to the single video page, to make the video open in lightbox window when the video title is clicked you can go to Themify > Settings > General and add this to the Footer Code option:


<script>
jQuery(function($) {
	$( '.video-multiple .post-title a, .loops-wrapper.video .post-title a' ).click( function(){
		$( this ).closest( '.post' ).find( '.lightbox' ).trigger( 'click' );
		return false;
	} );
} );
</script>

Open album posts in lightbox

By default when site visitors click the album titles are redirected to the single album page, to make the album open in lightbox window when the album title is clicked you can go to Themify > Settings > General and add this to the Footer Code option:


<script>
jQuery(function($) {
	$( '.album-multiple .post-title a, .loops-wrapper.album .post-title a' ).click( function(){
		$( this ).closest( '.post' ).find( '.themify-lightbox' ).trigger( 'click' );
		return false;
	} );
} );
</script>

Album cover image size

Music theme by default shows the covers for the Album posts in square shape, if you want to be able to customize the size using the Image Width and Image Height options (found in Themify Custom Panel > Album Options tab when you're editing an album) you can use:


<?php

function custom_themify_theme_album_single_image_dimensions( $size ) {
   return array( themify_get( 'image_width' ), themify_get( 'image_height' ) );
}
add_filter( 'themify_theme_album_single_image_dimensions', 'custom_themify_theme_album_single_image_dimensions' );

Show past events in event category taxonomy archive

By default only the upcoming events are displayed in the Event Category taxonomy pages. To disable this behavior and show all events you can use:


<?php

function custom_event_category_sort() {
    if( is_tax( 'event-category' ) )
        add_filter( 'themify_theme_event_sorting', '__return_empty_array' );
}
add_action( 'template_redirect', 'custom_event_category_sort' );

Switch map and featured image in single event pages

In single event pages, the map is displayed on the right side while the map goes in the background. To switch the places of map and the featured image you can use:



.single-event .event-map {
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    margin-top: 40px;
    margin-right: 40px;
    background: #1a1c1c;
    width: 350px;
    z-index: 2;
}
.single-event .event-single-details {
    position: static;
    max-width: inherit;
}
.single-event .event-single-details .post-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.single-event .event-single-details .event-info-wrap {
    position: relative;
    z-index: 3;
    max-width: 350px;
    float: right;
    margin-top: 200px;
    background: #000;
}

Parallax

Disable the header area

You can edit the page and then from Themify Custom Panel > Page Options tab, enable the "Exclude Header" option, this will disable the header area, however the menu will still be visible on top of the page.

Disable the header area on all pages except homepage

This snippet hide the header area on all pages of the site except the homepage.


.no-home #header hgroup {
    display: none;
}
.no-home #headerwrap {
    height: 0 !important;
    background: none !important;
}
.no-home #nav-bar {
    position: fixed;
    top: 0;
    bottom: auto;
}

Unlink portfolio images

This snippet is useful when you don't want the portfolio images to be linked to the portfolio items.


<?php
 
function custom_unlink_portfolio_images() {
	global $post, $themify;
 
	if( $post->post_type == 'portfolio' && is_singular( 'portfolio' ) ) {
		$themify->unlink_image = 'yes';
	}
}
add_action( 'themify_post_before', 'custom_unlink_portfolio_images' );

Move menu to the top of the page

This snippet forces the menu to be displayed always on top of the page.


#nav-bar {
	top: 0;
	bottom: auto;
	position: fixed;
}
.admin-bar #nav-bar {
	top: 32px;
}
.home #main-nav ul {
	bottom: auto;
}
.home #main-nav ul:before {
	bottom: auto;
	top: -8px;
	border-top: none;
	border-bottom: 8px solid #fff;
}
@media screen and (max-width: 760px) {
	#main-nav {
		top: 100%;
		bottom: auto;
	}
}

Display site logo in the fixed header

Would you like to display your site logo in the fixed menu? This snippet is just for you:


#header hgroup {
    -webkit-transform: inherit !important;
    -moz-transform: inherit !important;
    position: relative;
}
.fixed-header-on #header hgroup {
    z-index: 99999;
}
.fixed-header-on #site-logo {
    position: fixed;
    top: 0;
    left: 0;
}

Left-align header elements in Parallax

Move the site logo, site description and other elements in the header to the left side of the header.


#site-logo,
#site-description,
.social-widget,
#header #searchform {
    text-align: left;
    text-indent: 5%;
    margin-left: 0;
}
.widget.themify-social-links {
    text-indent: 0;
}

Add a down arrow in the header for scrolling pages

You can use the Button module in Builder to add a link to the desired section in the page.

Flatshop

Remove product lightbox

This will remove the lightbox displayed when you click the More Info button for products.


<?php

function themify_loop_add_to_cart_link( $format = '', $product = null ) {
	$url = $product->add_to_cart_url();
	if ( function_exists( 'themify_is_touch' ) ) {
		$isPhone = themify_is_touch( 'phone' );
	} else {
		if ( ! class_exists( 'Themify_Mobile_Detect' ) ) {
			require_once THEMIFY_DIR . '/class-themify-mobile-detect.php';
		}
		$detect = new Themify_Mobile_Detect;
		$isPhone = $detect->isMobile() && !$detect->isTablet();
	}
	if( ( 'variable' == $product->product_type || 'grouped' == $product->product_type ) && !$isPhone ) {
		$replacement = 'class="variable-link '; // add space at the end
		$format = preg_replace( '/(class=")/', $replacement, $format, 1 );
		$format = preg_replace( '/href="(.*?)"/', 'href="'.$url.'"', $format, 1 );
	}
	if ( $product->is_purchasable() ) {
		$format = preg_replace( '/add_to_cart_button/', 'add_to_cart_button theme_add_to_cart_button', $format, 1 );
	}
	return $format;
}

Hide the cart icon when it's empty

Hides the cart icon in the header when there's no product in the cart.


<script>
jQuery(function($){
	$('body').on( 'added_to_cart', function(){
		$('#cart-icon').show();
	} );
	if( $('#shopdock .product').length > 0 ) {
		$('#cart-icon').show();
	}
});
</script>

Pinboard

Fluid layout for all pages

On homepage of your site, Pinboard stretches to the borders of the screen to make use of the available screen space. If you want to have the same effect on all pages you can use:


.pagewidth {
    width: 94%;
}
@media (min-width: 771px) {
    #content {
        width: 75%;
    }
    #sidebar {
        width: 22%;
    }
}

Fullpane

Reverse the location of header and footer

Since 1.2.2 the theme includes an option to change the menu bar and footer locations, you can find it in Themify > Settings > Theme Settings.

Flat

Force section backgrounds to cover the entire section

This snippet makes the background images that you upload for each section to cover the entire section (regardless of their size)


.sidebar-none.list-post .section {
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}

Remove the header

Removes the header on the site but keeps the menu.


div#headerwrap {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
#header > * {
    display: none;
}
#header nav {
    display: block;
}
ul#main-nav {
    padding-top: 15px;
}
.fixed-header #main-nav {
    text-align: center;
}

Smaller Header

If the header is too large for you can you make it smaller using:


ul#main-nav {
    padding: 20px 0; /* default: 40px */
}
h1#site-logo {
    padding: 10px 0 10px; /* default: 65px 0 30px */
}
h2#site-description {
    margin-bottom: 10px; /* default: 30px */
}

Header bar with logo on the left and menu on the right

This snippet will move the logo to the left of the header bar and the menu to the right:


@media (min-width: 850px) {
    #headerwrap {
        background-color: white !important;
        height: 64px;
        position: fixed;
        width: 100%;
        top: 0px;
        z-index: 300000 !important;
    }
    #site-logo {
        position: fixed;
        top: 0px;
        left: 0px;
        padding: 0;
    }
    #main-nav {
        position: fixed;
        top: 0px;
        right: 0px;
        padding: 10px;
    }
}

#site-description,
form#searchform,
div.social-widget {
    display: none;
}

Customize chart parameters

To change the chart options (used in Highlights, also in the Feature module in Builder) you can use:


<?php

function custom_chart_init_vars( $args ) {
	return array(
		'trackColor' => '#f2f2f2',
		'scaleColor' => false,
		'lineCap' => 'butt',
		'rotate' => 0,
		'size' => 170,
		'lineWidth' => 22,
		'animate' => 2000
	);
}
add_action( 'themify_chart_init_vars', 'custom_chart_init_vars' );

Magazine

Display logo between top two menus

With this snippet you can move your site logo so it is displayed between the top and primary menu.


@media (min-width: 780px) {
    #headerwrap {
        background: none;
    }
    #header {
        background: #0e88be;
        width: auto;
        margin-top: 180px; /* equal to the height of the logo */
    }
    #header.header-on-scroll {
        margin-top: 0;
    }
    #site-logo {
        position: absolute;
        left: 0;
        top: -180px; /* equal to the height of the logo */
    }
    #header hgroup {
        float: none;
        position: relative;
        margin: 0 auto;
    }
}
@media (min-width: 1064px) {
    #sidr {
        width: 1064px;
        margin: auto;
    }
    #header hgroup {
        width: 1064px;
    }
}

Metro

Registering a new tile size

Metro theme by default has 3 tile size options: Small, Medium and Large. This snippet helps you register a new tile size.


<?php
 
function register_custom_tile_size( $args ) {
	$args[4]['options'][0]['meta'][] = array( 'value' => 'custom', 'img' => 'images/layout-icons/tile-custom.png', 'title' => __( 'Custom', 'themify' ) );
	return $args;
}
add_filter( 'themify_do_metaboxes', 'register_custom_tile_size' );

Now to set the dimensions of this new tile using custom CSS codes:


.tile.custom,
.tile-post.image.custom .tile-flip {
    width: 200px;
    height: 200px;
}

Register new tile colors

Add more color options fore tiles.


<?php
 
function custom_themify_theme_meta_boxes($arg) {
	array_push($arg[4]['options'][1]['meta'], array('value' => 'cyan', 'img' => 'images/layout-icons/color-cyan.png'));
	array_push($arg[4]['options'][1]['meta'], array('value' => 'silvergrape', 'img' => 'images/layout-icons/color-silvergrape.png'));
	return $arg;
};
add_filter( 'themify_do_metaboxes', 'custom_themify_theme_meta_boxes' );

Elemin

Move meta info to the bottom of the post in Elemin

The theme by default displays the meta info (author, comment counts, etc.) beside the post. This snippet moves it to the bottom of the post:


.loops-wrapper.list-post .post-meta,
.single .list-post .post-meta {
	top: 100%;
	width: 100%;
	text-align: left;
}
.loops-wrapper.list-post .post-meta span,
.single .list-post .post-meta span,
.post-meta .post-date {
	display: inline-block;
	margin-right: 10px;
}
.loops-wrapper.list-post .post,
.single .list-post .post {
	padding-left: 0;
}
span.post-icon {
	display: none !important;
}