Customizing the Blog page

• 

  wildhorizonscrossfit · Member · Feb 19, 2017 at 12:45 am

  • Copy link
  • Add topic to favorites

  Hi there,

  Just wondering how I might be able to customize my blog page. Currently it is just a long scrolling list of the posts, but I would like to possibly create a grid of posts, or otherwise manipulate it. Is there any way to do this through short code on the page or CSS?

  The blog I need help with is: (visible only to logged in users)

• 

  staff-loquaciousloon · Staff · Feb 20, 2017 at 8:45 pm

  • Copy link

  Hi @wildhorizonscrossfit!

  Adding a grid to an existing theme with CSS can be a bit of an advanced endeavor, and it doesn’t always work perfectly.

  Personally, I’d recommend looking into switching to a theme that was built with a grid:
  https://wordpress.com/themes/filter/grid-layout/

  Check the Posts Pages of the demo sites to make sure you’re happy with how the grid works, and you should be able to find something that fits your needs!

  If you have any questions about a particular theme, don’t hesitate to ask! :)

• 

  wildhorizonscrossfit · Member · Feb 23, 2017 at 6:49 pm

  • Copy link

  I may look into switching themes, but just out of curiosity why would it be so hard to make a grid of posts? Or even just change the post preview size etc so that more posts could fit on one page, potentially in multiple columns.

• 

  staff-loquaciousloon · Staff · Feb 24, 2017 at 1:19 pm

  • Copy link

  just out of curiosity why would it be so hard to make a grid of posts?

  There are lots of factors that go into a grid:

  – each item needs to be the same height, or you’ll end up with (at best) gaps and (at worst) unsightly alignment issues (completely empty spots in your grid).
  – image sizes – depending on the size of a theme’s Featured Image use, the images may not be a good size or in a good position to use as a grid
  – coding knowledge – creating a grid out of CSS involves a lot of spacing, and styling rules that can become complex – using lots of nth-of-type() CSS styles.

  With a grid or columns, you also need to account for different screen sizes – three columns can look great on a computer, but not work at all on a phone (the screen is too narrow). That means building multiple grids for multiple screen sizes.

  This process is often even more complex when you’re trying to add it on top of an existing layout, as opposed to building a page as a grid from the start.

  Or even just change the post preview size etc so that more posts could fit on one page

  You can shorten the posts on your blog page, using the More Tag to set the point where you’d like each post to end with a link on the blog page. You can also use Content Options under My Site > Customize > Content Options to set you site to display excerpts in stead of the full posts.