[Resolved] Creating latest 3 blogs on home page

[Author]

Posts

[lukeM-7]

Hi,

If you look at the site hidden link

You will see that we have a 3 grid layout going on, as per the counting boxes.

What we would like to do is add the latest 3 blogs above the counting numbers. These 3 boxes should always show the latest 3 blogs uploaded to the website.

I presume I can add them into this format

<div class="row">
<div class="col-sm-4">[?????]</div>
<div class="col-sm-4">[?????]</div>
<div class="col-sm-4">[?????]</div>
</div>

But I'm unsure of the code I need to add to show:
- Blog image
- Blog Title
- Date
- Author

Somewhere else on the site (Blog page) I have this code block, but I'm unsure how to apply and use it and always show last 3 blogs.

Would you be able to provide me with an example of the code block needed to achieve this, please?

Thanks
Dan

[Luo Yang]

Dear Dan,

I suggest you try these:

Create a post view:
- Query blog posts
- in section "Ordering", choose options: Order by Post date Desending
- in section "Limit and Offset", choose option: Display 3 items
See screenshot 3-blogs.JPG

in section "Loop Editor", use "Bootstrap grid" option to setup three columns layout:
https://toolset.com/documentation/user-guides/view-layouts-101/#bootstrap

And display the Views shortcodes for each item:
- Blog image
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image
- Blog Title
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-title
- Date
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-date
- Author
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-author

[lukeM-7]

Sorry, I was hoping for a little more to help me with this, at least the code block as have no idea where to start even with the guides.

[Luo Yang]

What is the code block you mentioned above?
Please provide a test site with the same problem, also point out the problem page URL and view URL, I can setup a demo for you.

[Luo Yang]

I have tried the credentials you provided above, it is not valid, I get this error:
ERROR: The username or password you entered is incorrect
Please check it.

And please provide more details for the question:

we are aiming to have the latest 3 blog posts in the 3 spaces above where the number count boxes show...

How and where I can find the "number count boxes"? Where I can edit it to add Views shortcode? please point out the URLs

[lukeM-7]

As I mentioned, those user details work, did you follow the instructions?

Enter the details, hit the return key on your keyboard, repeat by hitting return key again if error message to login shows again.

Keep pressing it and it will log you in .

The number count boxes are on the home page of the website!

Is this clear?

[Luo Yang]

Yes, I can pass the htaccess window, but can not pass the WordPress login window, see screenshot.
Please check it.

Don't forget provide more details as I mentioned above:
https://toolset.com/forums/topic/creating-latest-3-blogs-on-home-page/#post-1217886

[Luo Yang]

You still did not answer the question:
Where and how can I add Views shortcode?

Here are details steps I tried in your website:
1) Login
2) open URL hidden link
3) click link "edit page"
it redirect me to:
hidden link

I have tried add some static text in the page content, test it in front-end, it does not display in front-end.

Can you confirm it? Is it the problem as you mentioned above?
at least the code block as have no idea where to start even with the guides.

If it is, I suggest you check these first:
In case it is a compatibility problem, please deactivate other plugins, and switch to wordpress default theme 2019, and test again

[lukeM-7]

You need to goto this page

hidden link

There you will see whats on this image hidden link

Scroll down, and you will see 3 white boxes called pounds, hours and teachers.

Above these, is where we want to place 3 boxes, for the latest 3 blogs on the platform.

To edit this page, the easiest way is to cick the front end editor button at the top and then click what is seen here

hidden link

and click 'edit content in back end' that will open the page with the code seen here, which I need to work out how to get the blog content onto.

Thank you

[wpv-conditional if="( '[wpv-current-user]' eq '' )"]

<div class="container-fluid">

<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body align-self-left">
<h4 class="list-group-item-headline boxFixDw">LATEST RESOURCES</h4>
hidden link" class="button product_type_subscription add_to_cart_button ajax_add_to_cart">VIEW NOW
</div>
</div>
</div>
</article>
</div>

<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">JOIN NOW</h4>
SIGN UP
</div>
</div>
</div>
</article>
</div>

<div class="col-lg-4 flexbox-equalise">
<article class="media card card-1">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="card-body card-body-left">
<h4 class="list-group-item-headline boxFixDw">FREE RESOURCES</h4>
hidden link" class="button product_type_subscription add_to_cart_button ajax_add_to_cart">VIEW NOW
</div>
</div>
</div>
</article>
</div>

</div>

[/wpv-conditional]

<div class="row">
<div class="col-sm-4">[tf_numbers name="207705"]</div>
<div class="col-sm-4">[tf_numbers name="hours"]</div>
<div class="col-sm-4">[tf_numbers name="teachers"]</div>
</div>
 

[wpv-conditional if="( '[wpv-current-user]' eq '' )"]
<div class="panel panel-default card">
<div class="panel-body">
<h2 class="memberShipLogoutBox">What do I get for my membership?</h2>
<div>
<div class="col-lg-12 memberShipLogoutBox">
<div class="clearfix">
<span>
<ul style="display: inline-block; text-align: left;">

Hundreds of Quality Resources, Planning Templates and Brainstorm Ideas <br>for Enhanced Planning created by Early Years Experts

Bespoke Active and Practical Phonics Planning

Bespoke Guided Maths Planning

A unique program to build your own Learning Journey

Resources made to request with no additional charge

A Calendar of Celebrations with information and ideas

Keep current with the latest news in Early Years

Learn new skills and improve your practice

Join a Community of likeminded Early Years Practitioners with free access <br> to the Staffroom with anonymous posting

Knowledge that your subscription will never increase

Stress relief

</span>
</div>
</div>
<div class="col-lg-4">
</div>
</div>
</div>
<div class="panel-footer">
Join now
</div>
</div>
[/wpv-conditional]

[Luo Yang]

Thanks for the details, I have done below modifications in your website, here are detail steps:
1) Goto home page:
hidden link
click button "Front-end Layouts Editor"

2) It redirect me to URL:
hidden link

3) Click button "Edit layout on back-end"-> click link "Page: Home", see screenshot page-home.JPG
It redirect me to layout Page: Home
hidden link

4) In above layout, row 6, add a Views cell "latest 3 blogs"

5) You can style/format above post view as what you want:
hidden link

[lukeM-7]

Thank you, this is great.

I just need your assistance to finish a few other bits.

- The articles should be contained with in a white box that matches the width of the white boxes below
- Can the images be scaled up and centred - basically make the blog image larger and centre
- Same with the name and date text, just centre that please.

THank you very much.

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/need-your-assistance-to-finish-a-few-other-bits/

[Luo Yang]

I assume the original question of this thread is resolved:
https://toolset.com/forums/topic/creating-latest-3-blogs-on-home-page/#post-1217106

For other new questions, please check the new thread here:
https://toolset.com/forums/topic/need-your-assistance-to-finish-a-few-other-bits/

[lukeM-7]

I'm trying to replicate this on live now, can you explain the steps to create the view? At the moment when I try and do this I get what is shown here, which shows <unformatted> how do I get it to follow the boostrap template format you have used. If you can give step by steps to follow that will help.
Thanks

[Luo Yang]

You can follow our document to setup Bootstrap layout in view's loop:
https://toolset.com/documentation/user-guides/view-layouts-101/#bootstrap

Section "Bootstrap grid"

[lukeM-7]

Thanks, would you mind looking on the live site and telling me what I have done wrong?

hidden link

basically, I cannot see the blogs appearing?

Can you enable private so I can send login details?

Many thanks