[Resolved] Grouping by Year and Month

[Author]

Posts

[ianH-12]

Tell us what you are trying to do?
Grouping a What's on list by Year / Month
I am trying to group based on a custom field that holds a Unix timestamp.
I am struggling to get the function working, which I think is more to do with the conversion of the Unix timestamp

Is there any documentation that you are following?
https://toolset.com/2013/10/how-to-group-views-results-by-year-and-month/
Is there a similar example that we can see?

What is the link to your site?
hidden link

(Development Site)

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

The tutorial that you referenced, uses the post date field for the grouping, but the same steps can be used for the Toolset Types' date type custom field too.

1. The custom shortcode to conditionally show the year and month headings, will be the same:

//group by month and year
add_shortcode('heading', 'my_heading');
  
function my_heading($atts, $content = '') {
  static $year = null;
  static $month = null;
  $condition = $atts['condition'];;
  $value = $atts['value'];;
  switch ($condition) {
    case 'year':
    case 'month':
      if ($$condition != $value) {
        $$condition = $value;
        return $content;
      }
      break;
  }
  return '';
}

The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

Next, please also add "heading" in the "Third-party shortcode arguments" section, at WP Admin -> Toolset -> Settings -> Front-end Content.

2. The heading content in the top of the view's loop will need to be changed and instead of the "wpv-post-date" shortcode, you'll use the Types fields shortcode:
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/#date )

[heading condition="year" value="[types field='date-field-slug' style='text' format='Y'][/types]"]
      <h4>[types field='date-field-slug' style='text' format='Y'][/types]</h4>
[/heading]

[heading condition="month" value="[types field='date-field-slug' style='text' format='F'][/types]"]
      <h5>[types field='date-field-slug' style='text' format='F'][/types]</h5>
[/heading]

Note: You'll replace "date-field-slug" with the actual slug of your date type custom field.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[ianH-12]

Thanks for the update.

I think our problem lies in the fact that our custom field is storing the date as a Unix timestamp. We have a function in functions.php to convert it to formatted text, but when using this it still does not work.

function convert_datey( $atts ) {
  
    // Attributes
    $atts = shortcode_atts(
        array(
            'timestamp' => '',
        ),
        $atts
    );
  
    $date = Date('Y',$atts['timestamp']);
      
    return $date;
  
}
add_shortcode( 'convert_datey', 'convert_datey' );

Happy to supply a login to the online dev version of the website.

[Waqar]

Thanks for writing back and Toolset's Types date type field also stores the date, as Unix timestamp.

I've set the next reply as private, so that you can share the temporary admin login details of the development website, along with the link to the page with this view.

[Waqar]

I'm getting the "The username or password you entered is incorrect." error message.

Can you please check the username and password?

Note: Setting your next reply as private again.

[Waqar]

I'm afraid, I'm still getting the same error message.

If there are some IP-based restrictions/protection involved, you can alternatively share a clone/snapshot of the website too.
( ref: https://toolset.com/faq/provide-supporters-copy-site/ )

Note: Setting your next reply as private again.

[Waqar]

The access details worked, thank you.

The code that you've entered was correct, but your new shortcodes "convert_datey" and "convert_datem" were not entered in the "Third-party shortcode arguments" section, at WP Admin -> Toolset -> Settings -> Front-end Content.

I added them and the conditional year and month headings started showing, as expected.

Structure-wise, you'll also need to change the view's grid structure, so that grid containers for each result are shown independently from the year and month headings.

For this, you'll need to remove the code for the headings from the "Fields and Text" block in the content template and insert it into the view's loop editor directly, so that it sits on top of each result item and not inside it.

The overall changes in the "Loop editor" section of the view will look like this:

[wpv-layout-start]
	[wpv-items-found]
		<div class="row ">
			<!-- wpv-loop-start -->
			<wpv-loop>
				[heading condition="year" value="[convert_datey timestamp ="[wpv-post-field name='_spektrix_start']"]"]
					<div class="col-md-12"><h4>[convert_datey timestamp ="[wpv-post-field name='_spektrix_start']"]</h4></div>
				[/heading]

				[heading condition="month" value="[convert_datem timestamp ="[wpv-post-field name='_spektrix_start']"]"]
					<div class="col-md-12"><h5>[convert_datem timestamp ="[wpv-post-field name='_spektrix_start']"]</h5></div>
				[/heading]
				<div class="col-md-4">[wpv-post-body view_template="loop-item-in-wo-shows"]</div>
			</wpv-loop>
		</div>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

[ianH-12]

Hi. Thanks for your help so far. I am glad I was on the right track.

Because we have this view as a grid layout, can you think of a way we can get the monthly banners to go across all three columns, rather than just the column when the month changes?

Thanks

[Waqar]

Thanks for writing back.

I don't see the structural changes from my last reply, in the "WO Shows" view's "Loop editor" section.

Once, you've applied those changes, the year and month headings will show covering full width, above the result columns.
( screenshot: hidden link )

[ianH-12]

My issue is resolved now. Thank you!