I am using bootstrap to layout a simple webpage. I have also add some css (@media (min-width: 1920px) {..}) media queries which I use for different resolutions

Now I hope WP has a hook which checks the media resolution so I can trim with more characters/words.

<?php echo wp_trim_words(get_the_content(), 40, '...'); ?>


 <?php echo wp_trim_words(get_the_content(), 70, '...'); ?>

In short, how can I output different text length based on browser resolutions?


Browser resolution is set on the user end. Actually, the window may even be resized after the page has been loaded. Css media queries will deal with that on the user end.

So, when the page is generated on the server side, the user window size is unknown and you cannot determine how many words to serve at that point. It has to be done on the user end.

The easiest approach would be to include the longest excerpt and wrap the last 30 words in <span> tags, which you hide using css on smaller screens.

A more complicated approach would be to detect screen size using jquery and then call the rest api to retrieve the relevant excerpt.


One way to find out if a specific function has hooks is to look it up on the WordPress Code Reference, usually just entering the function name and checkmark "Hooks". This will either take you directly to the hook of the same name or bring up a list of hooks that match the request.

Additionally, you may go to the function itself by using the same method above and checkmark "Function". By navigating down the the #Source section you can click the Expand full source code link which will reveal the entire function and you can look through it for any hooks it may have.

Finally, you wouldn't use PHP to check the browsers resolution, if you really need to do something like that you should be using Javascript or CSS (overflow: hidden?) but I wouldn't recommend doing something like that.


Checking the browser resolution is done thru Javascript or in your case bootstrap has different media breakpoints which you can use to hide/show different length of excerpt

1. For small devices (landscape phones, 576px and up)

@media (min-width: 576px) { ... }

<span class="d-none d-sm-block d-md-none">
    <?php echo wp_trim_words(get_the_content(), 40, '...'); ?>

2. For medium devices (tablets, 768px and up)

@media (min-width: 768px) { ... }

<span class="d-none d-md-block d-lg-none">
    <?php echo wp_trim_words(get_the_content(), 50, '...'); ?>

3. For large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

<span class="d-none d-lg-block d-xl-none">
    <?php echo wp_trim_words(get_the_content(), 60, '...'); ?>

4. For extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

<span class="d-none d-xl-block">
    <?php echo wp_trim_words(get_the_content(), 70, '...'); ?>
  • OK, so you put the same content multiple times on same page? I really don't think it's a good idea from SEO point of view... And to be honest, it's not exactly what's RWD is about... – Krzysiek Dróżdż Jul 10 '18 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.