WordPress trick for teasers in posts home page only on small screens

This trick doesn’t work. It appeared to when I first did it but it doesn’t.

If you are using a responsive design in WordPress and have widgets in a side bar, the downside can be a lot of scrolling when on the smaller screens of a mobile device to get to those, and will anyone bother? I am a fan of putting the full post in the home page posts feed rather than an excerpt, because I am not trying to get hits I am trying to get information to myself and others as easily as possible. But if it is a particularly long post then the way to reduce the amount showing is to use the ‘more’ option.

In the visual editor there is a button with 2 thick horizontal parallel lines with a dashed line in between to insert the ‘more’ code (see image).

MoreButtonArrow

Put your cursor in the position in the text where you want the post to be cut and then click on that button and you will get a grey dashed line with the word MORE in the body of the text (see image). When the post appears on the list on the home page there will be a break at that point and a link saying “read more” that will open the single post.

MoreVisual

In the text view there is a button with the word ‘more’ (see image)

MoreTextHightlight

That inserts the code below, which you could also type in manually.

<!-- more -->

That is all well and good, but I wanted to have the full article showing on large screens and only cut with the more option on smaller screens, so I installed a handy plugin SO Responsive Content.

This plugin enables classes for different screen sizes. The list of which code does what is in the plugin. I used one that hides content for large screens and put it in a div around the more tag. So I put the more tag where I wanted the post to break when displayed on larger screens and then added the div around is like this:

<div  class="so-hide-large">
<!-- more -->
</div>

This only works if you have the plugin installed and activated.

Now the full post appears on the home page on large screens, but on smaller screens only the text above the more tag shows and the user has to click on the read more link to see the full post. This cuts down on loading time for smaller devices.

Feature Image for post CC-BY-SA Todd Klassy https://flic.kr/p/6SrNg

885 Total Views 1 Views Today

You may also like...

Leave a Reply