![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
September 15, 2017 at 7:35 am #852405
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
September 17, 2017 at 8:01 pm #853118July 16, 2018 at 10:15 pm #986115Hello!
I am interested in adding the dates to my portfolio pages and have followed the instructions above.
I still do not see the date on my portfolio items, and I have a feeling it is because I have to style my “date-container, minor-meta and post-meta-infos classes” as the instructions suggest.
Unfortunately, I am new to CSS (but learning quickly). Can someone please give more guidance on how to style these classes?
Thank you in advance!
July 17, 2018 at 7:07 am #986279Hi flordelizamejia,
The dates are showing up fine on my end on that page, I’m guessing you managed to get it working?
Best regards,
RikardJuly 8, 2020 at 2:25 pm #1228874Hi
How do I change the date format ?
It show up like this: “2020-05-19 13:10:18” how do i change it to example “12. June 2020” ?-
This reply was modified 4 years, 2 months ago by
Simon Jensen.
July 10, 2020 at 12:15 pm #1229397 -
This reply was modified 4 years, 2 months ago by
-
AuthorPosts
- The topic ‘Add date to portfolio pages (Updated 2017 for Enfold 4)’ is closed to new replies.