• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

3 Column Custom Blog Page

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › 3 Column Custom Blog Page

This topic is: resolved

Tagged: 3, blog, column, custom, page

  • This topic has 3 replies, 1 voice, and was last updated 8 years, 5 months ago by Porter.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 16, 2014 at 6:38 pm #134718
    Porter
    Participant

    I'm trying to create a 3 column custom blog page (just for my articles, the only "post" category on my site), and need a bit of guidance on how to go about it. Essentially, I want the same design as seen here. As you can see, it's simply 3 photos photos per row, with the excerpt below the image. I feel like this is likely quite easy to do, but I'm unsure of if there are any classes already available I can use, and how exactly I would apply those classes within my custom loop. Note, it's important this page is responsive.

    If anyone could push me in the right direction, I can likely write most of the code myself. Thanks for the help 🙂

    anightinburlington.com/articles


    Buy me a beer? | Try DigitalOcean VPS Hosting

    December 16, 2014 at 8:04 pm #134723
    Porter
    Participant

    I've now nearly got what I was looking for (just used the one-third class with a div around all my posts in the loop), but the one-third class isn't quite fitting - two columns fit, and one is moved below. I assume this is because of a margin, and why the "first" class exists, but since I'm in a loop, there will be many "firsts" (every 3rd to be exact). I COULD iterate a variable and apply a different div on every first, but then there's the problem of responsiveness for when the browser isn't full size, or on mobile devices where there might only be 1 column going down.

    Ideally, I think I just need to center all 3 columns, rather than mess with "first" at all, but I'm not quite sure what's going on there, and need to get to the bottom of it.


    Buy me a beer? | Try DigitalOcean VPS Hosting

    December 17, 2014 at 1:36 pm #134767
    Porter
    Participant

    I worked on this a bit today, and I nearly have what I want, just one small thing. When I change the browser size to fit only 1-2 columns, rather than show only 1-2 for the width, all 3 shrink in size. How do I make it so that each column retains the original 1/3 area, and doesn't shrink when the windows is smaller? This is what I have thus far:

    PHP:

    function custom_do_page_content() {
    
    	$args = array(
    		'category_name' => 'articles',
    		'orderby'       => 'post_date',
    		'order'         => 'DESC',
    		'posts_per_page'=> '100',
    	);
    
    	$loop = new WP_Query( $args );
    	if( $loop->have_posts() ) {
    
    		// loop through posts
    		while( $loop->have_posts() ): $loop->the_post();
    		
    			?><div class="one-third-centered full-width-content"><?php
    			
    			echo(the_post_thumbnail());
    			?><h3><?php
    			echo(get_the_title());
    			?></h3><?php
    			echo(get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true));
    			
    			?></div><?php
    			
    		endwhile;
    	}
    
    	wp_reset_postdata();
    
    }

    CSS:

    .one-third-centered {
    	width: 31.33%;
    	margin: 1%;
    	padding: 1%;
    	float: left;
    	text-align: left;
    	background: #181818;
    	border: 1px solid #282828;
    }

    Buy me a beer? | Try DigitalOcean VPS Hosting

    December 17, 2014 at 7:33 pm #134782
    Porter
    Participant

    All fixed, I just added some responsive code to my 800px section:

    .one-third-centered {
    	width: 96%;
    	margin: 2%;
    	padding: 2%;
    }

    I even got the desired hover effect I was going to ask about next, by adding:

    a img:hover {
    	opacity: 0.7;
    }

    It's a dark hover rather than white, because of my background, but I could obviously change that to be white for that effect if desired.

    It seems the student has surpassed the master - sorry for the quadra-post 😀


    Buy me a beer? | Try DigitalOcean VPS Hosting

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘3 Column Custom Blog Page’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble