Optimization

Overview

Tips and tricks to optimize your theme.

CSS and JS Merging

Built-in script merging feature can be Enable or Disable from the Enfold theme options > Performance > File Compression. Here look for the heading titles “CSS file merging and compression” and “JavaScript file merging and compression“.

Problem with CSS file merging

The CSS merging feature may not work as intended or the background images may not show properly if there is an issue with the way the CSS file is encoded or because of some CSS syntax error in the style sheet. To resolve the CSS file merging issue, please perform the below steps:

  • Clear the cached files on your server and local browser.
  • Validate your custom CSS styles for possible syntax errors.
    Note: Usually CSS warnings are not errors but a false positive so you can just ignore the warnings displayed by the validator.
  • Delete any empty text boxes or non-printable characters that usually appears at the top of your style sheet. To highlight the empty text boxes, press the shortcut keys “Ctrl + A” and select all the text in your style sheet.
  • If your CSS code contains Unicode characters it is necessary to set the encoding of the style sheet to Unicode UTF-8. To tell the browser to encode the file in the correct format, specify @charset “UTF-8”; at the top of your custom CSS.
  • Go to Enfold > Theme Options and save the options to force re-generate the minified files.
    NOTE: You need to make any simple change in the settings to enable the save button.
  • If your theme was recently updated via theme options, please be sure that the update process was completed without any error message at the end.
  • Try updating the theme via FTP, After updating the theme make any changes in the theme options and save the options to force re-generate the merged files.

Full width Quick CSS text area

Quick CSS is a great way to add your custom styles. In case you use it often and your list is growing and want more space to manage the code please add the below function to your functions.php. If your list of modifications is growing we recommend installing a child theme and using the style.css to add your styles which can be accessed from Appearance > Editor

function admin_head_mod() {
echo '
<style type="text/css">.avia_sidebar_active .avia_control {width: 100%!important;}
.avia_sidebar_active .avia_description {width: 100%!important;float: left!important;padding: 0 0 10px 0!important;}</style>';
}
add_action('admin_head', 'admin_head_mod');

How to hide Enfold theme options like “Demo Import” or “Theme Update” tabs.

To hide the “Import Demo” and “Theme Update” tab in the theme options please add the below code to your functions.php file.

add_action('admin_head', 'hide_theme_options_tab');

function hide_theme_options_tab() {
  echo '<style>

  /* Hide Update tab */
 	.avia_subpage_container#avia_update,
	.avia_section_header.goto_update,

  /* Hide Demo Import  tab */
 	.avia_section_header.goto_demo,
	.avia_subpage_container#avia_demo 

	{
    	display:none !important;
    }
  
  </style>';
}

The CSS class name refrence to all the theme optiosn tabs are mentioned below and it can be used to add custom CSS styles:


/* avia tab */
.avia_section_header.goto_avia,
.avia_subpage_container#avia_avia {

}

/* layout tab */
.avia_section_header.goto_layout,
.avia_subpage_container#avia_layout {

}

/* styling tab */
.avia_section_header.goto_styling,
.avia_subpage_container#avia_styling {

}

/* customizer tab */
.avia_section_header.goto_customizer,
.avia_subpage_container#avia_customizer {

}

/* menu tab */
.avia_section_header.goto_menu,
.avia_subpage_container#avia_menu {

}

/* header tab */
.avia_section_header.goto_header,
.avia_subpage_container#avia_header {

}

/* sidebars tab */
.avia_section_header.goto_sidebars,
.avia_subpage_container#avia_sidebars {

}

/* footer tab */
.avia_section_header.goto_footer,
.avia_subpage_container#avia_footer {

}

/* builder tab */
.avia_section_header.goto_builder,
.avia_subpage_container#avia_builder {

}

/* blog tab */
.avia_section_header.goto_blog,
.avia_subpage_container#avia_blog {

}

/* social tab */
.avia_section_header.goto_social,
.avia_subpage_container#avia_social {

}

/* performance tab */
.avia_section_header.goto_performance,
.avia_subpage_container#avia_performance {

}

/* cookie tab */
.avia_section_header.goto_cookie,
.avia_subpage_container#avia_cookie {

}

/* newsletter tab */
.avia_section_header.goto_newsletter,
.avia_subpage_container#avia_newsletter {

}

/* google tab */
.avia_section_header.goto_google,
.avia_subpage_container#avia_google {

}

/* demo tab */
.avia_section_header.goto_demo,
.avia_subpage_container#avia_demo {

}

/* upload tab */
.avia_section_header.goto_upload,
.avia_subpage_container#avia_upload {

}

/* update tab */
.avia_section_header.goto_update,
.avia_subpage_container#avia_update {


}

Developer Info

Filters

To further modify the update options please check out the below filters and examples.

<?php

/**
 * This file contains code snippet to hide a specific data field on the option page.
 * 
 * Copy the required following snippets in functions.php and modify output to your need
 * 
 * @version 1.0.0
 * @requires Enfold 4.6.4
 */

/**
 * Hide a data field specified in $context
 * 
 * Example: Hide tab for non admins
 * 
 * @since 4.6.4
 * @param boolean $hide 
 * @param string $context				only 'updates_envato_token' supported
 * @retrun boolean						anything except false to hide the tab in context
 */
function my_optiospage_hide_data_fields( $hide, $context )
{
	if( 'updates_envato_token' == $context )
	{
		if( ! current_user_can( 'manage_options' ) )
		{
			$hide = true;
		}
	}

	return $hide;
}

add_filter( 'avf_optiospage_hide_data_fields', 'my_optiospage_hide_data_fields', 10, 2 );
<?php

/**
 * This file contains code snippet to hide a tab on the option page.
 * 
 * Copy the required following snippets in functions.php and modify output to your need
 * 
 * @version 1.0.0
 * @requires Enfold 4.6.4
 */

/**
 * Hide a tab specified in $context
 * 
 * Example: Hide tab for non admins
 * 
 * @since 4.6.4
 * @param boolean $hide 
 * @param string $context				only 'updates_theme_tab' supported
 * @retrun boolean						anything except false to hide the tab in context
 */
function my_optiospage_hide_tab( $hide, $context )
{
	if( 'updates_theme_tab' == $context )
	{
		if( ! current_user_can( 'manage_options' ) )
		{
			$hide = true;
		}
	}

	return $hide;
}

add_filter( 'avf_optiospage_hide_tab', 'my_optiospage_hide_tab', 10, 2 );
<?php
/**
 * This file contains code snippets to add or alter elements of the option page:
 *
 *	****** W A R N I N G: ******
 * DO NOT REMOVE THEME DATA FIELDS. Only hide not needed fields with CSS. Otherwise unexpected results and notices may occur.
 * 
 * Copy the required following snippets in functions.php and modify output to your need
 * 
 * @param array $avia_elements
 * @version 1.0.1
 * @requires Enfold 4.0.0
 */

/**
 * Modify an element
 * 
 * @param array $avia_elements
 * @return array
 */
function my_avf_option_page_data_change_elements( array $avia_elements = array() )
{
	/**
	 * Example: Customize "Header Custom Height" array
	 */
	$slug = "header";
	$id = 'header_custom_size';

	$index = -1;

	/*
	 * Find index of element to change
	 */
	foreach( $avia_elements as $key => $element )
	{
		if( isset( $element['id'] ) &&  ( $element['id'] == $id ) && isset( $element['slug'] ) && ( $element['slug'] == $slug ) )
		{
			$index = $key;
			break;
		}
	}

	/**
	 * If key not found, return unmodified array
	 */
	if( $index < 0 )
	{
		return $avia_elements;
	}

	/**
	 * Make your customizations
	 */
	$customsize = array();
	for ($x = 45; $x <= 500; $x++ )
	{ 
		$customsize[ $x.'px' ] = $x; 
	}

	$avia_elements[ $index ]['subtype'] = $customsize;

	/**
	 * Return modified array
	 */
	return $avia_elements;
}

add_filter( 'avf_option_page_data_init', 'my_avf_option_page_data_change_elements', 10, 1 );

/**
 * Add an element
 * 
 * @param array $avia_elements
 * @return array
 */
function my_avf_option_page_data_add_elements( array $avia_elements = array() )
{
	/**
	 * Example: Add after "Specify a favicon for your site" array.
	 *			Leave blank to add at the end
	 */
	$slug = "avia";
	$id = 'favicon';

	/**
	 * Define your new element to add (see enfold\includes\admin\register-admin-options.php what elements are possible)
	 */
	$new_element =	array(
					"slug"	=> "avia",
					"name" 	=> __( "Apple Icon", 'avia_framework' ),
					"desc" 	=> __( "Upload an Apple Icon to use", 'avia_framework' ),
					"id" 	=> "avia_appleicon",
					"type" 	=> "upload",
					"label"	=> __( "Use Image as Apple Icon", 'avia_framework' ) );

	$found = false;
	$index = 0;

	/*
	 * Find index of element to change
	 */
	foreach( $avia_elements as $key => $element )
	{
		$index++;

		if( isset( $element['id'] ) &&  ( $element['id'] == $id ) && isset( $element['slug'] ) && ( $element['slug'] == $slug ) )
		{
			$found = true;
			break;
		}
	}

	/**
	 * If key not found, add at the end
	 */
	if( ! $found )
	{
		$avia_elements[] = $new_element;
	}
	else
	{
		$avia_elements = array_merge( array_slice( $avia_elements, 0, $index ), array( $new_element ), array_slice( $avia_elements, $index  ) );
	}

	/**
	 * Return modified array
	 */
	return $avia_elements;
}

add_filter( 'avf_option_page_data_init', 'my_avf_option_page_data_add_elements', 10, 1 );
<?php

/**
 * This file contains code snippets to add or alter tabs of the option page:	
 * 
 * Copy the required following snippets in functions.php and modify output to your need
 * 
 *		****** W A R N I N G: ******
 * DO NOT REMOVE THEME TABS. Only hide not needed tabs with CSS. Otherwise unexpected results and notices may occur.
 * 
 * @version 1.0.0
 * @requires Enfold 4.0.0
 */

/**
 * Example: Hide Google tab for non admins
 * 
 * @param array $avia_pages
 * @return array
 */
function my_custom_option_page_modify_tab( $avia_pages )
{
	if( current_user_can( 'manage_options' ) )
	{
		return $avia_pages;
	}

	$found = -1;

	foreach( $avia_pages as $index => $page ) 
	{
		if( 'google' == $page['slug'] )
		{
			$found = $index;
			break;
		}
	}

	if( $found >= 0 )
	{
		$page = $avia_pages[ $found ];

		/**
		 * add hidden to class to hide tab
		 */
		$page['class'] = ! empty( $page['class'] ) ? "{$page['class']} hidden" : ' hidden';

		$avia_pages[ $found ] = $page;
	}

	return $avia_pages;
}

add_filter( 'avf_option_page_init', 'my_custom_option_page_modify_tab', 10, 1 );

/**
 * Example: Add your tab after Blog Layout tab
 * 
 * @param array $avia_pages
 * @return array
 */
function my_custom_option_page_add_tab( $avia_pages )
{
	$slug = 'blog';

	$new_element = array( 
						'slug'		=> 'your_slug', 		
						'parent'	=> 'avia', 
						'icon'		=> 'new/note-write-7@3x.png', 			
						'title'		=>  __( 'Your Page', 'avia_framework' )
					);

	$found = -1;

	foreach( $avia_pages as $index => $page ) 
	{
		if( $slug == $page['slug'] )
		{
			$found = $index + 1;
			break;
		}
	}

	/**
	 * If slug not found, add at the end
	 */
	if( $found < 0 )
	{
		$avia_pages[] = $new_element;
	}
	else
	{
		$avia_pages = array_merge( array_slice( $avia_pages, 0, $found ), array( $new_element ), array_slice( $avia_pages, $found  ) );
	}

	return $avia_pages;
}

add_filter( 'avf_option_page_init', 'my_custom_option_page_add_tab', 10, 1 );

Troubleshoot

As long as you do not change the theme version number, all changes to content of js or css files will result in the same hash extension. Which means browsers will not recognize these changes until the browser cache expires. To fix this Enfold adds an additional unique timestamp (since 4.7). Some server configurations cache internal WP data and therefore return wrong information about the existence of a compressed file – and as a result, it generates a new file on each page load and folder ../wp-content/uploads/dynamic_avia rapidly grows.

To avoid this you, can go to Enfold theme options > Performance > Show advanced options and choose “Disable adding unique timestamps” in “Unique timestamp of merged files” to suppress adding the timestamp. Depending on your hoster, it may still take some time till this setting will work correctly. Disable file merging, select “Delete old CSS and JS files” – wait for some time, clear server cache and then reactivate your settings.

Information for users with database, file merging and uploads/dynamic_avia folder problems (wp object cache related):

Update Enfold
– Theme options -> Performance -> Show advanced options -> Unique timestamp of merged files and WP object cache bug
– Fix WP bug add unique timestamp or
– Fix WP bug disable unique timestamps
– Disable js and css file merging and compression
– Check Theme options -> Performance -> Delete old CSS and JS files
– Save theme options (this will clean up database and remove all merged files)
Clear server cache
– Enable js and css file merging and compression if desired
– Uncheck Theme options -> Performance -> Delete old CSS and JS files if desired
– Save theme options