Using WP Show Posts

Last Updated on October 10, 2018 by Larious

Adding post lists and grids to your Site couldn’t be easier than with the WP Show Posts plugin. Dispatch uses the Free version to display posts on the Front page and in the Sidebars. Of course with a little Flint Skin CSS treatment.

Head off to Dashboard > WP Show Posts > All Lists. Within are six lists:

  • Align
  • Standard
  • Sidebar
  • Header
  • Simple
  • Simple Sidebar

Each of them have very particular settings required to match the demo content you see here. Changing those settings may affect the way the post is displayed, and not necessarily for the better. So please work on a duplicate or make a note before changing.

Note: the name of the List has no relevance to the different styles displayed.

General ( and important ) information

Before we go into the detail let’s cover some basic and very important information.

Advanced Settings

For the purpose of the demo content a couple of the Lists are using Advanced Settings. First off the Standard List is using Ascending Order (Default: Descending).  Secondly the Simple List is using Offset, so it omits the first 4 posts. You may want to put these back to default if you’re not intending to replace them.

Duplicating WP Show Posts List

So we have four lists, and we want to make a new Standard list with a different category. The easiest way is to use one of the Duplicate Post plugins in the WordPress repository. Simple hey. And it works for all post types including GP Elements. Awesome. Note: When making a duplicate you are generally given two options. Clone and New Draft. I advise using the New Draft as some people have reported issues when using Clone.

 

List: Standard

This is the standard WP Show Post list that has the same custom styling applied to the GP Blog:

Glo Bounce Tariff Plan: Free 3OMB, Free Midnight Calls + Calls @5k/sec

Last Updated on November 15, 2014 by Larious

globounceGlo bounce, one of my best glo tariff plans which i actually enjoyed and i want to recommend this plan to young lovers who always want to be in touch with their boo or if you are a heavy glo caller and the person who are calling is also on the glo network. This plan is the best of all other glo tariffs plans in the country.

Not Eligible For Airtel 4GB BIS Data Plan? Try This Code and be Eligible

Last Updated on September 29, 2014 by Larious

airtel+4gAirtel came with a new BIS data plan of 4GB for 2 months which just cost 1500 Naira. This caught the interest of every internet user in the country. Everyone wants to subscribe for the plan, but their hopes were cut short due to the fact that the plan wasn’t meant for everyone because Airtel made the plan sim selective. Due to the fact I got lots of requesting asking how to be eligible for the plan if your sim is not eligible. This article focuses on finding a way for those Sims that were not eligible. Airtel is well aware of this situation. That is why they made a way to enable Sims that were not eligible to be eligible.

Glo 1K for 3GB BIS On Android

Last Updated on November 15, 2014 by Larious

glo BIS-726204The fun of using and android device is not complete without internet subscription, Network Providers data plans are quite expensive for the average Nigerians and the hunt for cheap internet plan is always on the rise.  Am going to share with you guys how you can browse on your android device using the blackberry 1k for 3GB BIS plan.

How To Send MTN Data As a Gift

Last Updated on July 15, 2014 by

MTN data shareMTN data gift service allows  you buy a gift as a data bundle to send to friends, family and colleagues. by simply paying for the data on behalf of the person you’re sending the data to. This seems awesome because you just have to surprise the person by sending data bundle as a gift. Trust me he/she would appreciate the surprise being in terms of a data bundle plan. This can also be used to send data to your other devices.

This is how the list is displayed within the Content area just by adding the WP Show Post Shortcode. Here follows the basic styling changes that have been made.

Content Wrap (WPSP Only)

Using a custom Hook Element the Post article content is now wrapped within a DIV container. This container carries a class of wpsp-content-wrap for styling. This wrap is present on all WP Show Posts that are output inside Dispatch.

Featured Image

The featured image has a fixed height to match the layout. This is achieved using this CSS:


.generate-columns-container article .inside-article img,  .wp-show-posts-image img {
    height: 180px;
    width: 100%;
    -o-object-fit: cover !important;
    object-fit: cover !important;
}

You can edit the height property to suit, or remove the CSS it entirely if you want to use your own sizes.

Meta above title

This is achieved using a flex box on the Entry Header. Again this applied to the GP Blog:


.generate-columns-container article .entry-header, .wp-show-posts-entry-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

Entry Title forced to 2 lines

The entry title always displays a minimum and maximum of 2 lines. This mantains the across row alignment. Again this is applied to GP Blog. The ex unit is used to define the number of lines visible. The lines are set by defining the line-height and setting the height to as many mutiples as you require lines. e.g up the height to 7.5ex will create three lines.


.generate-columns-container article .entry-header .entry-title, .wp-show-posts article .wp-show-posts-entry-title {
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

List: Align

Designed for a single column list this displays the content the image to the left and content to the right. This is subtly different to just resizing the image in the WP Show Posts list settings and aligning it left. Thanks to the Content Wrap we added (above) the content will never wrap around the image. On mobile it just stacks.

To add one of these your posts requires a little markup. And is done like so:

<div class="wpsp-align">shortcode_goes_here</div>

Last Updated on September 27, 2021 by Larious If you have not heard about Tom Clancy’s Rainbow Six Siege or any of the other Rainbow Six games, then you must…

Last Updated on September 26, 2021 by Larious Outsourcing your IT needs is definitely the right move in today’s world. If you were to hire an entire team to take…

Last Updated on September 20, 2021 by Larious Buying a swanky car is a dream of every commoner, and it is a cynosure of everyone’s eyes. Your dream might start…

Last Updated on September 9, 2021 by Larious Whether reality or imaginative, let’s assume that you’re a victim of car theft or find yourself in a situation where you need…

Last Updated on September 7, 2021 by Larious Sometimes, going for the latest model of a laptop may not be a suitable choice due to high prices or lack of…

Last Updated on September 7, 2021 by Larious Arbitrage is probably attributable to price differences in the same cryptocurrency between exchangers or markets. As we may be aware, the cryptocurrency market…

Last Updated on August 30, 2021 by Larious Gays specifically suffer online because of the lack of proper structure for gay chatting. There are sites that claim to be gay-friendly…

Last Updated on July 19, 2021 by Larious If you already have a landline telephone number and prefer to use the conventional method of receiving faxes, all you need to…

Last Updated on July 18, 2021 by Larious [ad_1] FM broadcasting is a method of radio broadcasting using frequency modulation (FM) technology. Invented in 1933 by American engineer Edwin Armstrong,…

Last Updated on July 18, 2021 by Larious [ad_1] Although WhatsApp is the most used instant messaging application globally, that doesn’t mean that it is the best, nor that it…

 

Lists: Sidebar

In the right had sidebar you can see the Sidebar list. This List is set to 1 column and only displays the Featured Image, Title and Category. This is designed for Widgets, a narrow column or as part of a grid (like in our next List).

To add this style the Widget requires a CSS Class of:

wpsp-card

Dispatch comes with Widget Classes Plugin installed. This provides this function.

 

List: Header

The Header list as seen on the Front Page requires a list containing only 5 posts. And can accomodate most of the content elements. Which are only displayed on the large leader post.

To add this style the Header Element requires the following element classes:

wpsp-grid wpsp-card

List: Simple

This is output using the wpsp-card inserted into a containing DIV like so:

<div class="wpsp-card">shortcode goes here</dib>

 

List: Simple Sidebar

Nothing fancy here,  just a list being output using the a Widget in the sidebar.

 

 

%d bloggers like this: