Quick Snippets for Enfold Child Theme

Quick Snippets for Enfold Child Theme

User Al-Mamun Talukder Date Posted March 20, 2017 Category WordPress, Coding, CSS, PHP Comments 18

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