1

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?

  • By default WordPress doesn't show blog posts in any way. It depends totally on your theme HTML and CSS. – cybmeta Dec 26 '14 at 12:19
0

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;
}
}
| improve this answer | |
  • 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. – cybmeta Dec 26 '14 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. – AMRis Dec 26 '14 at 12:58
-2

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

| improve this answer | |
  • 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? – Adam Dec 26 '14 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... – vlood Dec 26 '14 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.