The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    This reply has been reported for inappropriate content.

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

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed