Skip Navigation

[Resolved] custom alphabetic search/display

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

Problem:
How can I create a View that has a Custom Search by the alphabetical first letter order of my post titles?

Solution:
It's not possible with Views, it requires Custom Code, that we do not support.
It is also not planned to add that as a feature to Views for now.
Look here for a full custom solution:
https://toolset.com/forums/topic/help-with-custom-alphabetic-searchdisplay/#post-537018

This support ticket is created 6 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

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.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 6 replies, has 2 voices.

Last updated by raulE-2 6 years, 9 months ago.

Assisted by: Beda.

Author
Posts
#534695

I am trying to: add Alphabetic filter on a view

I visited this URL and follow Ana instructions: https://toolset.com/forums/topic/alphabetic-filter/#post-226238

I have done all steps and got this: hidden link

Clicking on the letters the filter do not work.

Here is the login info if you want to log in and see it:

<removed by admin>

View is: escritores-query-abc-novo

Thank you

Raul

#534962

This is Custom Code that we do not assist anymore in this Forum.

As far I understand, you want a Custom Filter by alphabetic Letters (A, B, C) and so on, and when clicked/submitted, all posts beginning with A must be shown.

This hides several problems.
As first, what to do if a Post is numeric?
What if it's almost duplicate of another? (ABC and ABCD)

As you see, this is not something restricted by Views but by the logic itself.

Where should the Letter be matched? Anywhere in the content, in the first letter only, and so on.

This is why Views does not feature that and why we do not provide a Custom Solution for it.

What you should do instead is adding a Custom Field with the 24 alphabetic letters as a select Custom Field.
Each post has to be saved with a letter set.
After it will be easy to create a Custom Search by alphabetic Letters, and you will get exactly the results you want, this way.

#535527

Hi

It's a pity that views could have a filter option to list post that began with one letter. I know it's possible to set a custom taxonomy ( for example "Alphabetic Group") and each post should have one group marked.

But the problem, in this case, is this:

1- I have already more than 500 posts in this directory and would have to edit one by one to set the correct taxonomy.
2- One someone adds a new post, he have to add one more fild checked

Thank you anyway. I will try to find the solution for myself.

#536437

I have already more than 500 posts in this directory and would have to edit one by one to set the correct taxonomy.

What you can do is bulk edit the Posts in Dashboard > your_post_type > All > Check all posts and then Select Edit from the Select Field.
After, you can check the term for all the posts that share that same term.

This would save a lot of time.

One someone adds a new post, he have to add one more field checked

Yes, there is no way around that, even with a Field.

The Custom code provided in the other Thread is something we do not assist, but to be honest, give we provided it in past, I will query with Ana and the Developers if maybe we can do something here, as I see the power in it.

I can not assist it right now but perhaps I can provide you something in a close future, if not, then maybe a new Feature, I will let you know!

#536529

Beda

Thank you for your reply.

Certainly, having the possibility to do a Query like " field began with" ould be a big enhancement to Toolset and Views.

I will be waiting for good news from you 😉

Raul

#537018
Bildschirmfoto 2017-06-15 um 15.13.21.png

OK.

BTW, I analysed that Code and it works perfectly fine.

But, you need a Submit Button.
To adapt this to AJAX you need custom code that I cannot provide.

So here again how you can make this work with the Current Toolset:

1. I work with the native Post Type "post".
If you use a Custom Post type, please read my code carefully as you will need to adapt it.

2. I work with 2 Views, ID "8" and "9".
This WILL be different on your install and you will need to adapt the code, please read my comments in the code carefully.

3. Create a View, let's call it "The Search". In My situation, this is the View with ID "8".

In this View, query the Post Type "post" and add this to the Loop Output Editor:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	  <ul id="wpv_heading_tab" style="display:none;">
        <li data-letter="">All</li>
        <wpv-loop>
          [wpv-heading-aux condition="letter" value="[wpv-post-title]"][/wpv-heading-aux] 
        </wpv-loop>
	  </ul>
	<!-- 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]

4. Create another View, let's call this one "The results". In my situation, this is the View with ID "9".

5. Query the Post type "post" in this View and make sure you have this Code in the Filter Editor:

[wpv-filter-start hide="false"]
[wpv-filter-controls]<div style="display:none;">
	[wpv-filter-search-box output="bootstrap"]
</div>[wpv-filter-submit output="bootstrap"][/wpv-filter-controls]
[wpv-filter-end]

Note that the wpv-filter-search-box and the wpv-filter-submit MUST be inserted by the GUI.
So you cannot just copy paste the above code but need to insert the Filters with the GUI, and then adapt so it looks like the above code.

6. In this View's Loop Output Editor make sure you have this:

[wpv-layout-start]
[wpv-view name="the-search"]//This is the First View we created (View with ID 8, "The Search")
    [wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          [wpv-post-title]//this is just an example, here you can insert whatever you want to display as results
		</wpv-loop>
	<!-- 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]

6. In this View's Loop Output Editor JS and CSS sections please add what follows:
CSS:

ul#wpv_heading_tab {
  border-top: 1px dotted #787681;
  border-bottom: 1px dotted #787681;
  padding: 8px 0;
}
#wpv_heading_tab li {
  display:inline-block;
  list-style:none;
  margin:0 1px;
  padding:2px 7px;
  font-size:85%;
  cursor: pointer;
}
#wpv_heading_tab li:hover, #wpv_heading_tab li.active {
  background-color:#005580;
  color:#fff;
}

JS:

jQuery(document).ready(function($) {
    try{
        var $tab = $('#wpv_heading_tab');
        if ($tab.length) {
            var letter = $('li.active', $tab).data('letter') || '';
            if (!letter.length) {
                letter = $('input[name="wpv_post_search"]').val() || '';
                letter = letter.substring(0, 1);
            }
            $('li', $tab).removeClass('active');
            $('li[data-letter="' + letter + '"]', $tab).addClass('active');
            $('li', $tab).not('.disabled').click(function(e) {
                $('li', $tab).removeClass('active');
                $(this).addClass('active');
                var letter = $(this).data('letter') || '';
                $('input[name="wpv_post_search"]').val(letter);
            });
            $tab.show();
        }
         
    } catch(e){
    }
});

7. Now insert BOTH Views to a Page, the "The Search" of course will display the Letters, the "The results" of course the resulting Posts.

8. Insert these Functions in your functions.php and please read this code carefully as you need to adapt it to work properly:

Nothing to adapt:

add_shortcode('wpv-heading-aux', 'wpv_heading_aux');
function wpv_heading_aux($atts, $content = '') {
  static $heading = null;
  static $index = 0;
  extract( shortcode_atts( array(
        'condition' => '',
        'value' => '',
    ), $atts ) );
  $index++;
  $letter = strtoupper(substr($value,0,1));
  $output = '';
  if ($heading != $letter) {
    $heading = $letter;
    if ($index > 1) {
        $output = '</li>';
    }
    $output .= '<li data-letter="' . $letter . '">' . $letter ;
  }
  return $output;
}

To Adapt:

add_filter( 'wpv_filter_query', 'search_by_first_letter_of_title', 99, 3 );
function search_by_first_letter_of_title( $query_args, $view_settings, $view_id ) {
     if ($view_id = 8) { //This must be the ID of the View "The Search", in my case ID "8"
          $types = (array) $query_args['post_type']; 
          if ( !is_admin() && in_array( 'post', $types ) ) {//If you query another Post type, please change 'post' to 'your_post_type'
               add_filter( 'posts_where', 'posts_where_first_letter');
          }
     }
    return $query_args;
}

Nothing to adapt:

function posts_where_first_letter( $where ) {
     remove_filter( 'posts_where', 'posts_where_first_letter');
     if (!empty($_GET['wpv_post_search'])) {
          $param = esc_sql($_GET['wpv_post_search']);
          $where = str_replace( "post_title LIKE '%" . $param . "%'", "post_title LIKE '" . $param . "%'", $where );
     }
     
     return $where;
}

Now on the Front End you will have what you see in my screenshot.
Clicking the Letter and hitting Submit, will display the desired Posts.

#537646

Thank you. I will try this later.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.