Add date to portfolio pages (Updated 2017 for Enfold 4)

Hi fellow Enfolders!

I’d like to share with everyone here an updated version on this topic https://kriesi.at/support/topic/add-date-to-portfolio-pages

The steps listed in that thread (now closed) are way out of date (2013) and are not compatible with Enfold 4 and if you try and follow the steps, you’re probably going to break your theme.

The first part is the same, find wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/portfolio.php
This is where it’s different. It’s because the theme has evolved so much since 2013, and now has special IF/ELSE statements for mobiles and the editor previews etc.

Find line 560, just above this IF statement;
if($columns == "1" && $one_column_template == 'special')

And add the first part to create a dynamic macro of the date above that IF statement;

				$portfolio_date = get_the_date($entry->post_date);
				
                if($columns == "1" && $one_column_template == 'special')

Now scroll down about 30 lines, to 588 at the end of the nested if(!empty($title)) function and add the 4 required lines below;

					$output .= "<br>";
					$output .= "<span class='post-meta-infos'>";
					$output .= "<span class='date-container minor-meta'>".$portfolio_date."</span>";
					$output .= "</span>";

But wait, we’re not done yet!
Scroll down to about line 642. This is at the end of the second nested if(!empty($title)) function and add the 4 required lines below it;

					$output .= "<br>";
					$output .= "<span class='post-meta-infos'>";
					$output .= "<span class='date-container minor-meta'>".$portfolio_date."</span>";
					$output .= "</span>";

This will now add the full date and time to your Portfolio Grid element that you put on any page or post using the Advanced Layout Builder

The full functions should now look like this;

				$portfolio_date = get_the_date($entry->post_date);
				
                if($columns == "1" && $one_column_template == 'special')
                {
                    $extraClass .= ' special_av_fullwidth ';

                    $output .= "<div data-ajax-id='{$the_id}' class=' grid-entry flex_column isotope-item all_sort {$style_class} {$post_class} {$sort_class} {$grid} {$extraClass}'>";
                    $output .= "<article class='main_color inner-entry' ".avia_markup_helper(array('context' => 'entry','echo'=>false, 'id'=>$the_id, 'custom_markup'=>$custom_markup)).">";
                    $output .= apply_filters('avf_portfolio_extra', "", $entry);

                    $output .= "<div class='av_table_col first portfolio-entry grid-content'>";

                    if(!empty($title))
                    {
                        $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'id'=>$the_id, 'custom_markup'=>$custom_markup));
                        $output .= '<header class="entry-content-header">';
                        $output .= "<h2 class='portfolio-grid-title entry-title' $markup>";
                        
                        if(!empty($title_link))
                        {
                        	$output .= "<a href='{$title_link}'>".$title."</a>";
                        }
                        else
                        {
                        	$output .= "".$title."";
                        }
                        $output .= '</h2></header>';
                    }
					$output .= "<br>";
					$output .= "<span class='post-meta-infos'>";
					$output .= "<span class='date-container minor-meta'>".$portfolio_date."</span>";
					$output .= "</span>";

                    if(!empty($excerpt))
                    {
                        $markup = avia_markup_helper(array('context' => 'entry_content','echo'=>false, 'id'=>$the_id, 'custom_markup'=>$custom_markup));

                        $output .= "<div class='entry-content-wrapper'>";
                        $output .= "<div class='grid-entry-excerpt entry-content' $markup>".$excerpt."</div>";
                        $output .= "</div>";
                    }
                    $output .= '<div class="avia-arrow"></div>';
                    $output .= "</div>";

                    $image = get_the_post_thumbnail( $the_id, $image_size, $image_attrs );
                    if(!empty($image))
                    {
                        $output .= "<div class='av_table_col portfolio-grid-image'>";
                        $output .= "<".$link_markup[0]." data-rel='grid-".avia_post_grid::$grid."' class='grid-image avia-hover-fx'>".$custom_overlay.$image."</".$link_markup[1].">";
                        $output .= "</div>";
                    }
                    $output .= '<footer class="entry-footer"></footer>';
                    $output .= "</article>";
                    $output .= "</div>";
                }
                else
                {
                    $extraClass .= ' default_av_fullwidth ';
					
                    $output .= "<div data-ajax-id='{$the_id}' class=' grid-entry flex_column isotope-item all_sort {$style_class} {$post_class} {$sort_class} {$grid} {$extraClass}'>";
                    $output .= "<article class='main_color inner-entry' ".avia_markup_helper(array('context' => 'entry','echo'=>false, 'id'=>$the_id, 'custom_markup'=>$custom_markup)).">";
                    $output .= apply_filters('avf_portfolio_extra', "", $entry);
                    $output .= "<".$link_markup[0]." data-rel='grid-".avia_post_grid::$grid."' class='grid-image avia-hover-fx'>".$custom_overlay.get_the_post_thumbnail( $the_id, $image_size, $image_attrs )."</".$link_markup[1].">";
                    $output .= !empty($title) || !empty($excerpt) ? "<div class='grid-content'><div class='avia-arrow'></div>" : '';

                    if(!empty($title))
                    {
                        $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'id'=>$the_id, 'custom_markup'=>$custom_markup));
                        $output .= '<header class="entry-content-header">';
                        $output .= "<h3 class='grid-entry-title entry-title' $markup>";
                        
                        if(!empty($title_link))
                        {
                        	$output .= "<a href='{$title_link}' title='".esc_attr(strip_tags($title))."'>".$title."</a>";
                        }
                        else
                        {
                        	$output .= "".$title."";
                        }
                        
                        $output .= '</h3></header>';
                    }
					$output .= "<br>";
					$output .= "<span class='post-meta-infos'>";
					$output .= "<span class='date-container minor-meta'>".$portfolio_date."</span>";
					$output .= "</span>";
                    $output .= !empty($excerpt) ? "<div class='grid-entry-excerpt entry-content' ".avia_markup_helper(array('context'=>'entry_content','echo'=>false, 'id'=>$the_id, 'custom_markup'=>$custom_markup)).">".$excerpt."</div>" : '';
                    $output .= !empty($title) || !empty($excerpt) ? "</div>" : '';
                    $output .= '<footer class="entry-footer"></footer>';
                    $output .= "</article>";
                    $output .= "</div>";
                }

Of course, you will have to style the newly added date-container, minor-meta and post-meta-infos classes, but be careful, the last one is used on practially every post or custom post type showing a date. Use conditional CSS in order to restrict the styling to just a portfolio grid page;

.avia-fullwidth-portfolio .post-meta-infos {
    color: #333;
}

etc

Hope this helps others out there looking to add dates back into their Portfolio grids.
In my case, I’ve used Ismael’s excellent guide to change the name of “Portfolio” to something different, effectively converting the Enfold Portfolio system into it’s own Custom Post Type, but still reaping the benefits of using the Enfold Portfolio ;)
https://kriesi.at/support/topic/change-the-portfolio-items-name-in-admin-to-something-else/
https://kriesi.at/support/topic/change-portfolio-directory-name/

Cheers, Jenkins