Theme Code Snippets

All themes

This creates a background transition effect in the footerwrap from one color to another.


#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, 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' );

Issue with custom fonts on Firefox

Firefox has strict requirements 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 the following code 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. Click here for more information. You can ask your web hosting provider to fix this issue for you.

Hide header and footer inside lightbox window

In various modules in Builder (eg. Button module), you have the option to open an URL in a lightbox window. If the source URL is using a Themify theme, it will add a class lightboxed to the body tag (in the iframe tag). You can add custom CSS to target the page in the lightbox. For an example, you can hide the header and footer with this custom CSS:


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

Theme Settings Cache

The Themify themes cache all the theme settings in a file, which is, by default located in <theme>/themify/.data directory. This reduces the number of database queries thereby increasing the performance of your website. If your server is setup to sync files for backup, this feature may cause your settings to not be saved as expected. In such a case the caching can be easily turned off by adding this snippet into the wp-config.php file:


<?php

define( 'THEMIFY_SKIP_DATA_CACHE', true );

The location where the theme stores the settings cache can also be changed the same say, to do that:


<?php

define( 'THEMIFY_SETTING_CACHE_DIR', __DIR__ . '/wp-content/uploads/tf_datacache/' ); /* Note that the trailing slash at the end is required. */

This changes the path to the "tf_datacache" folder inside wp-content/uploads. You can then assign permissions or change the rules for file sync for that folder depending on your needs and your setup.

Builder

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 ) {
    $args['before_title'] = '<h3 class="module-title">';
    $args['after_title'] = '</h3>';
    return $args;
}
add_filter( 'themify_builder_module_args', 'custom_themify_builder_module_args' );

Disable front-end editor

If you want to disable the frontend Builder (without disabling the Builder entirely) you can use the following code in the child theme functions.php file:


<?php

add_filter( 'themify_builder_is_frontend_editor', '__return_false' );

Ultra

Display post title above post date

The post title by default is displayed below the post date. If you want to swap their position, add the following custom CSS:


.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 600px, the split scrolling effect is disabled. To change this, you would add this code in a child theme functions.php:


<?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 on the event post, 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

To change the size of the images displayed on the single gallery, 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 on the 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

To disable the map displayed on the single event:


.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 you click the video post title, it goes to the video single view. You can change the post title link to open video in lightbox by adding the following code in Themify > Settings > General > Footer Code:


<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

Similar as above, to change album post title to open album in lightbox, add the following code in Themify > Settings > General > Footer Code:


<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>

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 position of the 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

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


<?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 bar to the top of the page

This custom CSS forces the menu bar to be displayed at the top.


#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 on sticky header

By default site logo is hidden on sticky header. To show it on sticky header, add this custom CSS:


#headerwrap.fixed-header .header-bar{
  display:block
}
#headerwrap.fixed-header #site-logo {
    position: fixed;
    top: 30px;
    left: 20px;
    font-size:30px;
    z-index: 10000;
}

Left-align header elements in Parallax

To move the site logo, site description and social icons in the header to the left side of the header, add this custom CSS:


#header {
  text-align:left;
}
.header-bar,.sidemenu {
  padding-left:10%
}

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->get_type() || 'grouped' == $product->get_type() ) && !$isPhone ) {
		$url = add_query_arg( array('post_in_lightbox' => '1'), $url );
		$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

Hide the cart icon in the header when there is 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 the Pinboard homepage, Pinboard stretches fullwidth of the screen. If you want to have the same fullwidth layout on all pages, use this custom CSS:


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

Metro

Registering a new tile size

Metro theme by default has 3 size options for the Tile post type: 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 for Tile post type.


<?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 post meta to bottom

The theme by default displays the post meta info (author, comment counts, etc.) on the side of the post. This snippet will them 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;
}