Need to find something?

Enfold Theme

Quick Snippets for Enfold Child Theme

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

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)

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)

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)

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)

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)

Last Updated: March 26, 2021

Al-Mamun Talukder

About Al-Mamun Talukder

WordPress Developer. Minimalist Designer. Tech Enthusiast. Music & Movie Freak. Loves Cars. Founder of WolfDevs.

Connect with me: Upwork, GitHub, Facebook, Twitter

20 comments

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

    • A

      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

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

    • A

      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

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

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

    • A

      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.

  • Is there a way to make sure Advanced Layout Builder is automatically turned on for user generated posts?

    • A

      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.

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

    • A
      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.

  • THX man… do you have by any chance, a snippet for HTML working in blog excerpts post…!?
    all the best

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

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

Leave your comment