Symbols used for left and right pagination confusing

Home Forums Icelander Symbols used for left and right pagination confusing

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #16643

    design_dolphin
    Participant

    Symbols used for left and right pagination confusing

    Resolved

    Dear Oliver,

    Issue:
    The pagination at the bottom uses ‘»’ for moving forward/backward a page. Usually this symbol is used to move all the way to the end, or all the way to the front. The use of the current symbol is confusing.
    Also usually some themes have ‘>’ + ‘»’.

    Expected behavior:
    For moving up or down 1 page the expected symbol would ‘>’

    Can you please adjust this in the theme, or let me know how I can change the symbol used?

    This happens with the Monument Valley theme too:

    #16644

    Oliver Juhas
    Keymaster

    Hi @design_dolphin,

    I understand your point and reconsider this for the future theme update. This is only my personal preference for the « and » characters as they seem to (arguably) take more real estate and are thus better for accessibility. They are actually also used in WordPress native pagination function.

    There is no easy way of changing this via a child theme (so I will introduce a filter hook in next theme update), so, you need to edit theme files. The code you are looking for can be found in icelander/includes/frontend/class-loop.php in pagination() method (function) at line number 115.

    Sorry for inconvenience, but neither WordPress itself provide a hook to edit this right now (which is a surprise to me ;) ).

    Best regards,

    Oliver Juhas
    WebMan Design

    #16645

    Oliver Juhas
    Keymaster

    BTW, you can use http://brajeshwar.github.io/entities/ to change that « and » to your preferred character.

    Best regards,

    Oliver Juhas
    WebMan Design

    #16649

    design_dolphin
    Participant

    Well, that is interesting.

    Looked up the WordPress standard way, and it does use the >>.

    What I do notice is that it has the text ‘previous’ or ‘next’, and the example I’ve seen with WordPress themes where there is no text is what I explained.

    A hook could be a good way to solve it, and cater to people individual’s need.

    What you say about layout is a good point, I think I may change it to ‘>>>’ then, this way it is clear it goes to the next page (also looks a bit like the signs one sees on the road noticed just now), as well as make it clear for people with a visual impairment.

    Thank you for your help. :-)

    #16650

    design_dolphin
    Participant

    O.k. updating it.

    1. Also please keep in mind for Woocommerce there is also a pagination in ‘class-woocommerce-loop.php’, so it may be easier to have one central class for the whole theme for example class-pagination.php (and maybe that is a hook that within WordPress we can look at as well).

    2. I used 4x ‘‹‹‹‹’ and ‘››››’. It looks nice in the theme for the look I’m going for I think, it is clear to understand, and adapts to mobile. A problem also with show ‘previous’ and ‘next’ (except for accessibility class), is that it takes up quite a bit of room, and can make it difficult in different viewports.

    #16651

    design_dolphin
    Participant

    P.s.

    When this pagination functionality was written in WordPress there may not have been different viewports like smartphones at that time, so an overhaul of that functionality may be beneficial while retaining ease of use/compliance for accessibility, but that is beyond the scope of this ticket.

    #16653

    Oliver Juhas
    Keymaster

    Hi,

    I hide the “previous” and “next” text accessibly with CSS, but it’s still there. If you want to display it, please use a custom CSS (I suggest using your browser code inspector to determine the CSS you need to override).

    Thank you for pointing out the WooCommerce pagination too. But having a dedicated class for pagination where I could treat both WordPress native one and WooCommerce does not go with my coding approach, sorry. The thing is that WooCommerce compatibility is added module to the theme. Besides, as far as I know right now, WooCommerce pagination is a separated function. Anyway, I will surely apply the same filter hook name for both pagination attributes. Most likely it will be called wmhook_THEMESLUG_loop_pagination_args.

    As for pagination display on mobile devices, please use whatever suits your particular need. The theme has to be coded so it covers as many display cases as possible, either with “previous/next” text or with long pagination. However, mobile view of pagination for Icelander theme should fit any pagination size as, like I’ve said, I’m hiding the “previous/next” text ;)

    As for WordPress pagination function not containing filter hook, you may try to log a ticket for that. But responsive behavior of pagination is solely upon CSS, which is not related to that function in PHP and basically should be taken care of in the theme (or using custom CSS).

    Once I update the theme, I will let you know about the filter hook implementation by replying to this ticket.

    Best regards,

    Oliver Juhas
    WebMan Design

    #16668

    Oliver Juhas
    Keymaster

    Hi,

    I’ve just released a new theme update 1.1.1 fixing WooCommerce 3.2+ compatibility and also I’ve introduced new wmhook_THEMESLUG_pagination_args filter hook to modify pagination settings.

    Here is an example of how to use:

    
    /**
     * @param  array  $args  See https://developer.wordpress.org/reference/functions/paginate_links/ for possible options.
     * @param  string $scope  This is to differentiate theme pagination setup. You can check this value for <code>loop</code> (default pagination), <code>comments</code>, <code>woocommerce</code> and <code>woocommerce-comments</code> as of now.
     */
    function child_theme_pagination_args( $args = array(), $scope = '' ) {
      // Changing prev/next text globally for all scopes
      $args['prev_text'] = '< PREVIOUS';
      $args['next_text'] = 'NEXT >';
      
      return $args;
    }
    
    // For Icelander theme:
    add_filter( 'wmhook_icelander_pagination_args', 'child_theme_pagination_args', 10, 2 );
    
    // For Monument Valley theme:
    add_filter( 'wmhook_monument_valley_pagination_args', 'child_theme_pagination_args', 10, 2 );
    

    Best regards,

    Oliver Juhas
    WebMan Design

    #16676

    design_dolphin
    Participant

    Hi,

    Thank you very much. Amazing.

    Just to clarify what I meant with the CSS and original WordPress function, and it being out of scope of the ticket: I am so impressed with the way it is solved in this theme that I would recommend to take it along in the process when looking at the existing WordPress function, and if it is still valid in a view port era or should be improved.

    #16677

    design_dolphin
    Participant

    P.s.

    The filter hook works like a charm in the functions.php of the theme.

    To clarify further, sorry I think using CSS to make the ‘previous’ and ‘next’ part in an accessibility tag is a really good idea, in combination with the new viewport mechanics. This way people that need to can still read a text, but it does not interfere with the layout on smaller viewports. However, like I said it is out of the scope of this ticket. It is something that I hope the community look at though, if needed.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.