by default Wordpress shows blog posts one beneath the other showing short text and, if available, an image. The question is - is it possible to change that? I would like to have a grid consisting of 3 columns and 4 rows per page, and one item (blog post) in a grid would be a featured photo. Is it possible to adapt Wordpress blog in that matter?
1
-
By default WordPress doesn't show blog posts in any way. It depends totally on your theme HTML and CSS.– cybmetaCommented Dec 26, 2014 at 12:19
Add a comment
|
2 Answers
I use the masonry way at the end of my css;
/* Masonry Custom CSS for the Grid Style Blog */
/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
max-width: 100%;
margin-left: 20px;
margin-right: 20px;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article {
background-color: #eceff1;
max-width: 100%;
display: inline-block;
margin: 20px 0 1.5em;
padding: 1.5em;
width: 100%;
}
body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}
/* Responsive-ness for mobile */
@media only screen and (max-width : 1024px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 768px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 480px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
-
It seems that is your first answer in this site. Wellcome. Please, explain why and how your code works. Just pump code is not a good answer.– cybmetaCommented Dec 26, 2014 at 12:22
-
Hi, you're totally right. I follow this site already a long time and was never really contributing to it. Therefor I thought bringing some stuff to help people out with some Wordpress questions. Because I also had a question about a gridview like blog page, I stumbled onto the Masonry Layout (masonrylayout.com) and thought of sharing.– The Inc.Commented Dec 26, 2014 at 12:58
Yep, it's all a matter of selecting the right theme and setting your posts per page to 12 (Settings -> Reading).
Just an example of a theme which does this: https://wordpress.org/themes/tempera
-
I used this theme: wordpress.org/themes/vantage So there is only one way in which blog posts are shown? I can't change the display of blog posts by using Vantage theme?– AdamCommented Dec 26, 2014 at 10:33
-
This theme doesn't seem to support the grid view you are looking for. If you are not good in CSS and PHP, you'd better switch the theme or look for a plugin that will let you add grid view to your front page. This is not like the smartest move, though...– vloodCommented Dec 26, 2014 at 10:39