Thanks for writing back.
If multiple views/queries are used for each starting character, it can have an impact on the performance. The page loading time will increase, as the number of posts will grow over time.
On my test website, I was able to achieve this, using a single post view, and some custom code. Here are the steps:
1. I registered a custom shortcode, that gets the current post's title and returns only the starting character:
add_shortcode('start_with_class', 'start_with_class_func');
function start_with_class_func($atts) {
return strtoupper(substr(get_the_title(), 0, 1));
}
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.
2. Next, I created a classic/legacy view from WP Admin -> Toolset -> Views.
3. In the view's settings, I selected the post type to show the results from and set the order settings to show results ordered by post title in ascending order.
( screenshot: hidden link )
4. In the view's "Loop Editor", I structured the output in this format:
( screenshot: hidden link )
[wpv-layout-start]
[wpv-items-found]
<div id="new-container"></div>
<div id="orig-container" style="display:none;">
<!-- wpv-loop-start -->
<ol class="wpv-loop js-wpv-loop">
<wpv-loop>
<div class="orig-item-container" data-start-with="[start_with_class]">
[wpv-post-title]
</div>
</wpv-loop>
</ol>
<!-- wpv-loop-end -->
</div>
[/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]
Notes:
- In the layout, there are two main divs containers. The div with id "new-container" is empty and the div with id "orig-container" contains the loop of the results coming from the view.
- Each individual result item is enclosed in a div with class "orig-item-container" and "data-start-with" attribute holds the starting character for the post, through the custom shortcode registered in step 1.
- in this example, I'm only showing the post title of the current result using the shortcode [wpv-post-title], but you can show any information, using the respective shortcodes ( ref: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/ ).
If you'd prefer to show the individual result item using the Blocks editor, you can also create a new content template, design the individual result item and then load this template inside this view's loop, using the "wpv-post-body" shortcode:
( ref: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-body )
..........
<wpv-loop>
<div class="orig-item-container" data-start-with="[start_with_class]">
[wpv-post-body view_template="name of the content template"]
</div>
</wpv-loop>
..........
5. The last step is to include some custom script in the view's "JS editor" ( screenshot: hidden link ), that cycles through all the results available in the div with id "orig-container" and moves them inside the empty div with id "new-container", grouped by the starting character:
jQuery(document).ready(function( $ ) {
var arr = [];
i = 0;
$('#orig-container .orig-item-container').each(function()
{
var currentStartWith = $(this).attr('data-start-with');
if(jQuery.inArray(currentStartWith, arr) == -1) {
arr[i++] = currentStartWith;
$('#new-container').append( '<div class="new-item-container" data-start-with="'+currentStartWith+'"><h3>'+currentStartWith+'</h3></div>' );
}
$('#new-container .new-item-container[data-start-with="'+currentStartWith+'"]').append($(this).html());
$(this).remove();
});
});
I hope this helps and please let me know if any step or point is not clear.
Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/
