Grow your CSS skills. Land your dream job.

Control wordpress excerpt length at different screen sizes

  • # February 3, 2013 at 7:31 pm

    Hi all

    I am creating a responsive worpdress site, and would like to know if you can set a different length of excerpt text depending on screen sizes.

    So for example, on the home page for mobile phones, I would like to display 15 words for the excerpt.

    For screen width above 800px I would display 30 words.

    Above 1200px, display 50 words and so on.

    Is this possible?

    Thanks in advance.

    # February 3, 2013 at 7:38 pm

    My first guess would be to use something like respond.js, because I don’t know if WordPress has support for that

    https://github.com/scottjehl/Respond

    # February 3, 2013 at 8:05 pm

    You’re probably going to have to use some Javascript to control this — WordPress can’t (although there might be a plugin available, haven’t checked).

    You’d have to start with setting the maximum number of words for an excerpt (say, 500). Then the Javascript would detect the screen resolution (probably upon load and screen resize), and then based on that, take off the appropriate number of words from that original 500.

    That’s the trickiest part I think, cause you’d have to convert the original 500-word excerpt into an array of words, and then take a number of elements in the array to write it out again word for word, until you reach the number of words you want.

    I wouldn’t be able to explain the full details but I would say that’s the theory behind it.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".