Skip Navigation

[Resolved] Grouping by Year and Month

This thread is resolved. Here is a description of the problem and solution.

Problem:
The customer asked how to show the view's results, ordered/grouped by year and month.

Solution:
Shared the steps and the custom code examples.

Relevant Documentation:
n/a

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 0.22 hours from now. Thank you for your understanding.

This topic contains 9 replies, has 2 voices.

Last updated by ianH-12 1 month, 3 weeks ago.

Assigned support staff: Waqar.

Author
Posts
#2386763

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)

#2387091

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#2387109

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.

#2387245

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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.

#2387295

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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.

#2387319

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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.

#2387503

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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]

#2402667

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

#2402677

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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 )

#2402685

My issue is resolved now. Thank you!