Blog list in Grid Layout on Front Page

Small correction to my question:
Should I be working in the “class-content-post_list.php” or the “class-content-featured_pages.php,” or both:?

Thanks,

jmw

Dear GreenGriot,
What version of the Customizr theme are you using? I couldn’t find the class-conent-post_list.php file in the theme files

Thanks,
Ryan

Hi Ryan,

I have version 3.1.14. the “class-content-post_list.php” file is in the folder marked “parts”.

I downloaded it from the demo site as opposed to the dashboard just in case that makes a difference.

Hope that helps

jmw

Dear GreenGriot,
Thanks, I found the file.

I think you’ll be better off using the filters in the class than making a copy of the file and changing it.

The index.php file also has a lot of actions you could use. For example:

add_action( '__after_loop' , 'my_after_loop_action' ) ;
function my_after_loop_action() {
  echo $example_html ;
}

By using the actions and filters, it’ll be much easier to upgrade your version and keep your changes.

Does this help?

My best,
Ryan

Ryan is absolutely right – don’t change core files. A few docs to read:
– Child Theme
– Hooks API (may be too advanced depending on your skills)
– Basic Hooks Guide

But unless it’s a typo, why are using 3.1.14 (which is way out-of-date)? You should upgrade to 3.1.24 to get the latest features and most easily supported on the Forum.

RC,

Thanks. As I said in the original post the plan was to copy the file TO the Child theme and edit them from there.
What I didn’t understand was where I should be making changes: Featured page or post listing in general.

I was referring to the 3.1.14 because that is the version that is downloaded from the demo page and those were the files I was referring to. (Now that there is an upgrade Someone may want to change that.) The version I installed from the WordPress dashboard was recently updated. I am now using 3.1.24.

I hadn’t thought about hooks. All the other posts referred to the grid layout as an HTML or CSS issue.

Thanks for pointing me in the right direction.

If any one does any more experimenting with posts in a grid layout. They should definitely add it to the snippets library. Or perhaps it could be added to the latest version.

Grid layouts seem to be a highly requested feature these days.
It would be nice to have the option cleanly without worrying about clunking it up with a plugin. Hence learning about hooks…

Thanks for your help.

jmw

You’re right about the link, I’ve notified Nic.

If you look at the snippets, you’ll see how the Hooks are used. Takes time to get into it, but once it clicks it makes you realise how great the Czr theme is.

The Grid Layouts, I assume you mean using Masonry (cf Pinterest)? I’ve also been asking Nic about it as I’d like to see it in the Theme (see the Showcase). I’ve still to spend time trying Nic’s tips.

A Pinterest like layout would be nice but your basic layout would be enough for me.

Thanks for the tips.

jmw

Just a quick update.

I found a brief write up on how to build the grid just using CSS here:
https://premium.wpmudev.org/blog/add-masonry-grid-layouts-to-your-wordpress-site-with-just-css/

It speaks of both masonry grids and standard. I went the standard grid route using the following code:

/* Grid Layout Custom CSS */
body.search-results article, body.blog article, body.archive article {
width: 49.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait)
{
body.search-results article, body.blog article, body.archive article
{
width: 49%;
}
}
/* Additional CSS for Responsiveness */
@media only screen and (max-width : 768px)
{
body.search-results article, body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 480px)
{
body.search-results article, body.blog article, body.archive article
{
width: 100%;
}
}
.article-container .round-div {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.widget-front.hover .round-div, article.hover .round-div {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}

So far everything works fine. Such as this example/test search results page
https://qt.greengriot.com/?s=Standard

Although I didn’t use hooks and filters for this task, I’ve found a few helpful tricks for adjusting my thumbnails and the front page.

So thanks again, Guys
jmw

Marking this topic resolved.
Thanks