[Resolved] Adding and styling a new wp post list

[liz]

Hi,

I want to add a new WP post list to be displayed on the homepage. I want to design the layout of that block in such a way that the image is positioned to the left, and on its right side is the heading with excerpt and a background color that can be changed whenever there’s a new article to be posted on that section. The left and right corner should be of the same size.

I want to place the new added list after “featured” before “play” You can see these on my homepage. My website is in the private info field. Thank you in advance.

[Elvin]

Hi there,

First we create a new post list to be added there.

Go to Admin Dashboard > WP Show Posts and create a new post list. Set the query and other settings of this post list and copy its shortcode. We’ll need it on the next step.

As for adding a new section in between “featured” and play:

You can edit the page in question and duplicate the elements you need to duplicate within Gutenberg Editor – https://www.pair.com/support/kb/gutenberg-editor-how-to-duplicate-blocks/

Rearrange the duplicated elements and place them between “featured” and “play” to your preference.

Within the elements you’ll be duplicating you’ll likely find a shortcode block. You may have to replace its contents by a new shortcode. (the one we’ve copied when we created a new post list)

Save the page. This should add a new section in between “featured” and “play”.

[liz]

Hi, Elvin,

I already created the wp post list, what is the next step to finally design that particular wp list to my own liking? The image should be positioned to the left, and on its right side is the heading with excerpt and a background color (color will cover the whole area to the right) that can be changed whenever there’s a new article to be posted on the left section. The left and right corners should be of the same size. Thank you in advance. I am using the Dispatch theme.

[Elvin]

Open one of your existing WPSP list. (the one you used for “Featured”).

You then copy the settings on “Column”, “Cards” and “More settings” tab to the newly created WPSP list you’ve just added. 😀

[liz]

Hi, Elvin

Sorry to bother you..but I can’t find any option to add color to the background [right side-opposite the image]. To give you an idea, I will provide you a link to a website that has the image layout I’m aiming for. A background color opposite an image [you will see the link provided in the private info field] Thank you,Vin.

[David]

Hi there,

try this:

Make a duplicate of the Align List you have on the page, as that gives the basic structure you need.
Update the shortcode with your new list.
And change the <div> wrapper from this:

<div class="wpsp-align">

to include a new class eg.

<div class="wpsp-align wpsp-align-background">

Then you can add some CSS to add your background color, text colors and link colors:

.wpsp-align.wpsp-split-background .wp-show-posts-inner {
    background-color: #f00;
    color: #fff;
}

.wpsp-align.wpsp-split-background .wp-show-posts-inner a {
    color: #fff !important;
    border-color: #fff;
}

[liz]

Hi David,

Sorry for my lack of technical know-how. I am sorry you may have to discuss these with me in detail.

Step 1: What is the proper way of duplicating the “Align” list? I tried to duplicate the Align list in two ways. On the page itself using WordPress block editor and Another way is by adding a new post list. From there I don’t know how to edit the div and the shortcode. And maybe I’m not duplicating it the proper way. If you may, please explain it to me in detail.

Step 2: Editing the shortcode. How do I edit the shortcode? I know where it is but I can’t delete it nor edit the newly generated shortcode and don’t even know what to add in there.

Step 3: Change the

wrapper: Where can I find this “div” so I can edit it.

Thanks in advance.

[David]

Not a problem.

So let’s tackle it this way.

1. Create the new WP Show Posts list. And make a note of the Shortcode it provides.
2. Edit the Page. And insert an HTML Block into the position you want your new new list displayed.
3. Copy and paste the following code into the HTML Block:

<div class="wpsp-align wpsp-align-background">
[wp_show_posts id="113"]
</div>

Replace the [wp_show_posts id="113"] with your shortcode

[liz]

Hi,

Thanks.I followed the instruction but the color is still not visible..

[David]

Doh… sorry about that. Change the CSS to this:

.wpsp-align.wpsp-align-background .wp-show-posts-inner {
    background-color: #f00;
    color: #fff;
    padding-right: 40px;
}

.wpsp-align.wpsp-align-background .wp-show-posts-inner a {
    color: #fff !important;
    border-color: #fff;
}

[liz]

Hi, David

I Copied the CSS you provided and added CSS to add some colors but they’re still not showing so I deleted them. If you would be willing, I have provided my login details in the private info field. You can add whatever color you choose. Thank you.

[David]

You have some broken CSS above it – i fixed it, but reference this was the block of CSS and i commented where the bracket was missing:

.entry-content a {
    color: #ff1956;
}/* this bracket was missing */
@media (max-width: 768px) {
body {
font-size: 19px;
}
}

I had to clear the Cache afterwards to get the styles to update.
I generally disable cache plugins when making changes to a site, as they can drive you crazy when changes don’t show because of them 🙂

[liz]

David, thanks a lot. So I really need to disable the cache plugin whenever I make some changes. It did drive me crazy for weeks on end =) Thanks for helping me out!

[David]

Glad we could be of help

[Author]

Posts