wp_list_pages – is there a way to shorten title for display in footer on smaller screens for specific pages

1 Views

I have a wordpress site, and I am using the wp_list_pages in my footer (as an automated sitemap list) as follows: 

<ul style="list-style-type: none;"><?php wp_list_pages('exclude=143,1040,1045,1048&title_li='); ?></ul>

On a couple pages I have longer titles. This works fine for larger sized screens, but not so good on smaller screen sizes (too much line wrapping).

Read More

Is there a way I can code to check for specific page ids to take advantage of the @media Media Queries, and change the title for smaller screen sizes?

I’ve seen someone doing something like this to change a title for some pages to be ‘Poetry’: 

    <?php wp_list_pages( array(
    'include'  => array( 5, 9, 23 ),
    'title_li' => '<h2>' . __('Poetry') . '</h2>'
    ); ?>

, but I wouldn’t know how to adjust it to allow the rest of the pages to display with their normal titles, and only use the media query code to change to shorter titles on specific pages for specific sized screens.

Is this even possible?

Thanks for any help.

Post Views: 1

Related posts

2 comments

  1. I believe what you’re looking for is Responsive Web Design. Using specific styles for showing/hiding elements based on screen size is possible using Responsive Web Design which will accomplish what you’re looking to do.

    https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en

    You can then output the text you want for each target screen size, then show/hide the appropriate HTML element.

    You can also take a look at the bootstrap CSS framework to get an idea of what you can accomplish with a robust set of responsive CSS classes and breakpoints.

    http://getbootstrap.com/css/#responsive-utilities

  2. There is one way to display the trimmed text based on browser width but some JS will be required in that ..

    Let me go step by step.

    1. Print the subpages and provide and ID to ul (put your required arguments in wp_list_pages function)

      <?php
$children = wp_list_pages( 'echo=0' );
if ( $children) : ?>
    <ul id="subpages">
        <?php echo $children; ?>
    </ul>
<?php endif; ?>

    2. At the footer of the page write a jquery to print 2 span tag inside each <a> tag of the <li> 

      <script type="text/javascript">
    jQuery( document ).ready(function($) {
            $('#subpages li a').each(function(){
        var org_text = $(this).html();

        var trimed_text = '';
        if(org_text.length > 8){
            trimed_text = org_text.substr(0, 8)+'...';
        } else{
            trimed_text = org_text;
        }
        $(this).html('<span class="trimmed">'+trimed_text+'</span><span class="original">'+org_text+'</span>');
      });
    });
    </script>

      This will put 2 <span> tags inside each <a>. For Eg : If your page name is “Sample Page” then <span class="trimmed">Sample P...</span><span class="original">Sample Page</span> . One span containing class="trimmed" class and other one containing class="original".

    3. Now by use of CSS media query you can display none block these span tags by their class names

      @media screen and (min-width: 480px) {
    .trimmed {
        display : block;
    }
    .original {
        display : none;
    }

}

    As I am not a CSS guy, so put the media query correctly.
    But this can be made to work according to your requirements.

Comments are closed.