I have been a big fan of the Enfold Multipurpose WordPress Theme developed by Kriesi. I use it for almost every WordPress website that I create for my clients. Also, You may have already noticed; I also advertise the theme on this site. As the theme is extremely flexible and very well coded, it has become my all time favorite for any WordPress project.
While working on different requirements and features wanted by the clients, I have gathered a good amount of snippets that I often use for the theme. I have listed a few of them below for everyone’s convenience.
Thing You Should Follow
- The codes provided may not work for older versions of the Enfold Theme. The theme has gone through a lot of updates and improved a lot. Just check out the huge list of changelog!
- It is critical, making sure you are using a child theme over the parent theme (in this case the Enfold Theme) and always should be followed regardless of whatever theme you are using.
- Use the codes given below on the functions.php file of your child theme.
- In some cases, there are CSS and HTML codes which you may add on custom.css and to the file you are working.
List of Snippets – Jump to the one you like
- Enable Custom CSS Class Field for Advanced Layout Builder Elements
- Disable Layerslider
- Disable Portfolio Custom Post Type
- Deactivate Backlinks to Kriesi.at on Footer
- Enable Enfold’s Avia Layout Builder Debug
- Enable Advanced Layout Builder for Custom Post Type
- Breadcrumb filter for Custom Post Type
- Modify Enfold Theme Post Excerpt Length
- Add Extra Google Fonts to Theme Options
- Use the Magnific Popup Used on Enfold Theme
- Extra Footer Section Throughout the Site
- Using Featured Image as Page Header with Title & Breadcrumb
- Appearance of Mobile Menu Based on Custom Width
Enable Custom CSS Class Field for Advanced Layout Builder Elements
To be able to customize is the most important aspect of a WordPress theme for me. I fine tune my projects a lot – pixel by pixel if it needs to be. For this task, using Custom CSS Classes helps a lot. Simply add the code given below to enable the field.
add_theme_support('avia_template_builder_custom_css');
Code language: JavaScript (javascript)

Disable Layerslider
As much as I like the theme, I wish it had Revolution Slider instead of LayerSlider provided with the theme. I like Revolution Slider more, and as the theme comes with the LayerSlider, I almost always disable it. Here is the code if you feel the same too.
add_theme_support('deactivate_layerslider');
Code language: JavaScript (javascript)
Disable Portfolio Custom Post Type
All website don’t need a portfolio section. Similar to the case of LayerSlider, I don’t get to use it most of the time. So, I disable it to keep the dashboard clutter free of unnecessary features. Simply add the code below to turn off the portfolio custom post type on your website running with the Enfold Theme.
add_action( 'after_setup_theme','remove_portfolio_post_type', 100 );
function remove_portfolio_post_type() {
remove_action( 'init', 'portfolio_register');
}
Code language: JavaScript (javascript)
Deactivate Backlinks to Kriesi.at on Footer
Sorry Kriesi, but we can not always give credit to the original theme author on our projects (which I feel you deserve for your work). So, if you use Enfold, you will surely notice that the footer contains “© Copyright – [Your Site Name] – Enfold WordPress Theme by Kriesi” on the footer socket area. To disable this, you add the following code
add_filter('kriesi_backlink','remove_backlink');
function remove_backlink(){
$kriesi_at_backlink = '';
return $kriesi_at_backlink;
}
Code language: PHP (php)
Enable Enfold’s Avia Layout Builder Debug
This is very useful when you want to use the code built with the layout builder and use it elsewhere, for example on a custom page template. Unlike Visual Composer plugin, the layout builder does not display the generated shortcode when you go back to the classic editor from the Advanced Layout Editor. However, you can do get the shortcodes easily using this snippet. Simply add the code given below to your functions.php file and check the bottom of the pages for the full shortcode generated by the layout builder. Learn more about this snippet here.
add_action('avia_builder_mode', 'builder_set_debug');
function builder_set_debug() {
return 'debug';
}
Code language: JavaScript (javascript)
Enable Advanced Layout Builder for Custom Post Type
I love using the Advanced Layout Builder from Enfold. Its fast, flexible and saves a lot of time. By default, it is enabled for pages (right now, it also supports posts). We can enable it for custom post types as well. Just use the following code on your custom theme’s (or enfold’s) functions.php file. Don’t forget to change CUSTOM_POST_TYPE with your custom post type. In the following code, I showed for 2 custom post types CUSTOM_POST_TYPE
&CUSTOM_POST_TYPE_2
. You can use one or more as you like.
add_filter( 'avf_builder_boxes', 'enfold_customization_posts_builder' );
function enfold_customization_posts_builder( $b ){
$b[0]['page'] = array( 'portfolio', 'page', 'post', 'CUSTOM_POST_TYPE', 'CUSTOM_POST_TYPE_2' );
$b[1]['page'] = array( 'portfolio', 'page', 'post', 'CUSTOM_POST_TYPE', 'CUSTOM_POST_TYPE_2' );
return $b;
}
Code language: PHP (php)
Breadcrumb filter for Custom Post Type
Customize the breadcrumb for custom post type archive template with the following code. You will need to change the according to your need. [source]
add_filter('avia_breadcrumbs_trail', 'avia_change_breadcrumb', 20, 1);
function avia_change_breadcrumb($trail) {
if(is_singular('custom post type here'))
{
$home = avia_get_option('frontpage');
$last = array_pop($trail);
$page_id = get_option('MY_CUSTOM_POST_TYPE_PAGE');
$page = '<a href="' . get_permalink($page_id) . '">' . get_the_title($page_id) . '</a>';
$trail = array(0 => $home, 1 => $page, 'trail_end' => $last);
}
return $trail;
}
Code language: PHP (php)
Modify Enfold Theme Post Excerpt Length
To increase the default length of post excerpt (mostly used on post slider, blog archive, etc) you can use the following snippet. Increase or decrease the value to fit the need of your desired layout
add_filter('avf_postgrid_excerpt_length','avia_change_excerpt_length',10,1);
function avia_change_excerpt_length() {
return 250;
}
Code language: JavaScript (javascript)
Add Extra Google Fonts to Theme Options
The number of Google Fonts that are available (for use as heading and content area text) on the Theme Options panel is limited. However, you may add the ones you like using the snippet below.

Choose the font you like from Google Fonts website and change the code given below as per your choice of font.
add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts) {
$fonts['PT Sans Narrow'] = 'PT Sans Narrow:400,700';
$fonts['PT Sans'] = 'PT Sans:400,700,400italic,700italic';
return $fonts;
}
add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts) {
$fonts['PT Sans'] = 'PT Sans:400,700,400italic,700italic';
$fonts['PT Sans Narrow'] = 'PT Sans Narrow:400,700';
return $fonts;
}
Code language: PHP (php)
Use the Magnific Popup Used on Enfold Theme
As Enfold already uses the Magnific Popup plugin for lightbox or modal effects on images and other elements, I think we should be using it too in case we need to get lightbox or modal effect. I use it for inline content, and it looks and works great. I have the codes divided into three sections below. First part is to be added to functions.php file and the CSS to style.css file or custom.css file as you like. The HTML portion of the code is to be added to the template file or page you are going to have the popup, modal or lightbox (whatever you want to call it).
function inline_popup_enabler(){ ?>
<script>
(function($){
$(window).load(function() {
$('.inline_popup').magnificPopup({
type:'inline',
midClick: true
});
});
})(jQuery);
</script>
<?php }
add_action('wp_footer', 'inline_popup_enabler');
Code language: JavaScript (javascript)
<a class="inline_popup" data-mfp-src="#contact" href="#">Contact</a>
<div id="contact" class="white-popup narrow mfp-hide">
/* Anything that you want to display goes here */
</div>
Code language: HTML, XML (xml)
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
Code language: CSS (css)
Extra Footer Section Throughout the Site
It is a trend nowadays to have more than just footer widgets and copyright area. Things like newsletter subscription, call to action, client logos, sponsored links, etc makes its way to the bottom of the website on every page. It is an excellent way to present the essential part of the site to the visitor.
To have a section like that over the footer widgets section, on your website, use the following snippet. You may change the container and other bits to your need and can use any prebuilt layout from the theme. Here we are only hooking some code to an available hook defined in the footer section. You will find much more hooks throughout the theme. You can use “Simply Show Hooks” plugin from the WordPress plugin repository to easily find them.
add_action('ava_before_footer','extra_footer');
function extra_footer() { ?>
<div id='extra_footer' class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll avia-builder-el-32 el_after_av_layout_row avia-builder-el-last container_wrap fullsize'>
<div class='container'>
<!-- Your Content Goes Here -->
</div>
</div>
<?php }
Code language: JavaScript (javascript)
Using Featured Image as Page Header with Title & Breadcrumb
We can make a page look pretty with a good header image. This can be done with the featured image. Without the featured image set, a normal page looks like this

It looks good but can be better. After adding a featured image to the page we can get the following look

However, I don’t find this look to be the best. Which is why I use the following look for most websites.

Many of you may say, that it is possible to get the look with the help of Avia Page Builder / Advanced Layout Builder. But I think, setting up Color Section, adding image etc is more work than just adding a featured image and getting a great look.
add_action('wp_head', 'custom_code_for_wp_head');
function custom_code_for_wp_head(){
global $post;
$post_type = get_post_type($post->ID);
// Only for pages with featured image added and not for single posts also excluding woocommerce pages
if( has_post_thumbnail($post->ID) && $post_type != 'product' && $post_type != 'post' ) { ?>
<style type="text/css">
.inner-header-bg, .title_container {
background-image: url("<?php echo the_post_thumbnail_url( 'full' ); ?>");
}
.inner-header-bg, .title_container {
background-size: cover;
background-position: center;
border: none;
}
.inner-header-bg h1, .title_container h1.main_title, .title_container .main-title {
padding: 170px 0 15px 0;
font-family: 'Open Sans', sans-serif !important;
font-weight: 300 !important;
font-size: 40px !important;
line-height: 40px !important;
display: block;
}
.title_container .breadcrumb {
right: auto;
top: auto;
position: relative;
margin: 0;
padding-bottom: 30px;
}
h1.main-title.entry-title {
padding-left: 0;
}
.inner-header-bg, .title_container:after {
content: '';
display: block;
height: 100%;
width: 100%;
position: absolute;
background: rgba(0,0,0,.4);top: 0;
}
h1.main-title.entry-title a {
color: #fff !important;
}
.title_container .breadcrumb * {
color: #fff !important;
}
/* We need to disable the default page thumbnail */
.page-thumb {
display: none;
}
</style>
<?php }
}
Code language: JavaScript (javascript)
Appearance of Mobile Menu Based on Custom Width
Sometimes the main nav gets too long to fit the available breakpoints for the mobile menu. Here is the CSS code for setting the main nav to disappear and the mobile menu to appear to your desired width.
@media (max-width: 1250px) { /* Change the width as you need */
.responsive #top #avia-menu.av-main-nav .menu-item {
display: none !important;
}
.responsive #top .#avia-menu.av-main-nav .menu-item-avia-special {
display: block !important;
}
}
Code language: CSS (css)
20 comments
Juan
Hola. Your snippet ‘Using Featured Image as Page Header with Title & Breadcrumb’ doesn’t work with the left sidebar menu. It only works with the top menu. Is there a way to adapt it for the sidebar menu? Gracias.
Al-Mamun Talukder
Hi Juan, Please send me the link, I will take a look what’s the issue. You can contact me directly through the contact page. Thanks.
Charlie Terzo
Amazing post. I’m looking for a snippet that would allow me to add an image in the caption box of the fullwidth slider. I remeber seeing somewhere but can’t remember for the life of me where it was.
Carol Henrichs
The page header is just what I was looking for! Color section wasn’t going full-width for me but your code worked! Thanks!
Mauricio López
Hey Al-Mamun,
Thank you very much. You really save me hours!!
Best regards.
umberto
this is really great, but can you please tell me how to move title in mobile version ? I just add a min-height to 500px and a padding-top at 50% and I have title in mobile at half and in desktop at bottom….mmm I think I need some advice- Thx
Chris
Hi, great info here!
By any chance would you know how to move the product description and attributes to on top of the product image in the category views?
Al-Mamun Talukder
Thank you. You can make a copy of the Avia Template Builder Widget that is used for showing that content and then use the duplicated widget to show a different layout for the product. It’s a bit complicated way and hard to explain in a comment. You may try simple CSS as well. Make the outer wrapper display:flex and then set product description and attributes wrapper element to order:-1. You can find more about this here
osama
It’s one of the best post .. so helpful
Anonymous
Thanks for the snippets. Was trying to figure out a modal for the last few days. Keep up the good work!
odile
hello,
Thank you for your snippets, they work very well and it’s quick to implement. By chance do you have any snippets to make Enflod responsive for the most common column compositions? I mean, really responsive, because as it is at the moment, out of the box, it is not responsive at all. Whatever the column composition I choose I have to go to css to make it work and as I am not a developper, I waste hours and days. . Nothing works out of the box. If you had any snippet or could recommend any plugin that could save time this would be greatly appreciated. And also you say that the enfold support is fantastic, well this is not the experience I had with them: they don’t respond, or when they do it’s a wait response. I have seen on their forum that I am not alone in this case.
Al-Mamun Talukder
Hello Odile. Yes, the default columns can be a bit too narrow at times. However, there is workaround to get past that issue. You can change settings to make columns to stack earlier than the default 767px. Another way (which I mostly use) is to add some CSS in the child theme and re-use it on all the sites I use Enfold. From my findings, the biggest issue is caused by the gap between columns. I set the columns to be equal height and then add a class in the section so that I can target the div that will reduce the column gap. Hope it helps you. The other fact about the support from Enfold team. Yes, they can be a bit slow at times but I still find them generous to provide support to all the queries in their forum regardless of the customer’s available support period. Although, I think they should start providing only to the customers that are under the support time limit from themeforest. So, they will get less queries everyday and handle the forum much easier. Thank you.
Kylie
Is there a way to make sure Advanced Layout Builder is automatically turned on for user generated posts?
Al-Mamun Talukder
Hello Kylie. I am not sure what you meant by user generated posts. If you could let me know in details, I might be able to help you out. Also, please note that Enfold has a fantastic support team at https://kriesi.at. So, you can definitely contact them too! Thanks.
Thomas
Awesome collection of snippets! But as a total newbie, I’m in doubt – if I want the Featured Image as Page Header, where do I add the code? I’ve added it to functions.php and added a Featured image to a page, but nothing happens 🙁
Al-Mamun Talukder
Hello Thomas, Thanks for your comment. The code I shared can be used on functions.php file. Can you please share the code (in pastebin) so that I can take a look at it? Or you can knock me on live chat.
Stefan
THX man… do you have by any chance, a snippet for HTML working in blog excerpts post…!?
all the best
Al-Mamun Talukder
For that, you will need to modify the theme file(s) where the excerpt is used.
Alexandre Mabeix
Hi Real,
Great Post ! Thank you for these usefull snippets !! I’am also a great fan of Enfold !
About “Deactivate Backlinks to Kriesi.at on Footer” you can also simply put this shortcode [nolink] in the copyright field => © Copyright – [Your Site Name] – [nolink]
Cheers,
Alex
Al-Mamun Talukder
Hello Alex, Glad you liked my post. Good to see other Enfold fans here! I used to use [nolink] but later included the function on the child theme (which I always use) so no longer had to include it on every site 🙂