Content Under Images

Hi there, could you explain in more detail what you’re trying to do? A quick sketch or mockup could be especially helpful.

Are you referring to the blog index page, like this one?

https://pictoricodemo.wordpress.com/

There isn’t enough room in the layout to include much of each post’s content in each grid box, though perhaps a few words from the beginning of each post could fit. More clarification would be appreciated. Thanks!

Hi Kathryn

Thank you for your reply!

Just realized that I cannot add images here.

Here is a link to example created on Photobucket

Thanking you for your help!

Thanks for the screenshot. I’m going to assume you want to add excerpts within each grid box. ?? This isn’t a particularly easy task, but it was an interesting challenge to solve, so I got it working on my test site and I’m going to walk you through the steps to achieve this result on each square:

1) First, you’ll need to set up a child theme, so your tweaks won’t be overwritten when updating the theme. Here are some guides in case you haven’t made one before:

https://codex.www.ads-software.com/Child_Themes
https://op111.net/53/
https://vimeo.com/39023468

2) Make a copy of content-home.php from the parent and place it in your child theme folder.

3) You’ll need to make a few changes in this file in your child theme to display the excerpt:

a) After line 26, add this opening div tag:

<div class="clearfix"> <!-- clear floated elements so excerpt doesn't wrap -->

b) Close this div after these two lines:

<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?>
<?php endif; ?>
</div> <!-- .clearfix -->

This div will allow your excerpt to appear under the post title and date, instead of wrapping around them.

c) Below your new closing div tag, add this code to display the excerpt:

<div class="homeexcerpt">
  <?php the_excerpt(); ?>
</div>

4) You’ll also need to add some new CSS to your child theme’s style.css file. Try something like this to start and adjust the first block of code as you like:

.blog .site-content .entry-header .homeexcerpt p {
  font-size: 14px;
  line-height: 1.3;
  width: 200px;
  margin: 10px 20px 10px;
}

.blog .site-content .entry-header,
.archive .site-content .entry-header,
.search .site-content .entry-header {
   left: 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

This CSS will also remove the sliding behaviour of the post titles and dates, which didn’t work well with the excerpts displayed.

5) These are some recommended tweaks to add to your child theme’s functions.php file:

<?php

function custom_excerpt_length( $length ) {
	return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

function new_excerpt_more( $more ) {
	return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . __('Read More', 'your-text-domain') . '</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );

If your child theme’s functions.php already has an opening php tag, don’t include one a second time.

The first function shortens the excerpts to make them fit nicely into the grid squares. More in the Codex: https://codex.www.ads-software.com/Plugin_API/Filter_Reference/excerpt_length

The second function adds a “Read more” link at the end of each excerpt, instead of the default ellipsis. More: https://codex.www.ads-software.com/Function_Reference/the_excerpt#Remove_.5B.E2.80.A6.5D_string_using_Filters

I noticed that you also showed a link to the post comments in your screenshot. Given the small size of the grid squares, I don’t recommend adding that as those squares will start looking really cluttered.

I hope this helps achieve the look you’re after. Good luck and have fun experimenting in your child theme

Hi Kathryn,

I think this should be voted the best WordPress answer of the year if not the best WordPress answer of the decade. ??

It worked perfectly. I wanted the text below each image, but I guess that there is no space available for this?

Much thanks for your help!!

I think this should be voted the best WordPress answer of the year if not the best WordPress answer of the decade. ??

Aw, thanks! I’m glad it worked.

I wanted the text below each image, but I guess that there is no space available for this?

Pictorico’s grid structure doesn’t really allow for content to be displayed outside of each post “box” – it was complicated enough to add more content within each box. ??

NEVERMIND, FIGURED IT OUT–THANKS FOR ALL YOU DO!!
Hi Kathryn! I have a few questions because I am currently doing this exact thing on my site…

Where does the “excerpt” pull it’s text from? The post or is it entered elsewhere?

Also, how would I just put the excerpt on the thumbnail with no slider (don’t want date or title)? I just need the excerpt!

Thank you so much for any input!!

https://pictoricodemo.wordpress.com/
hi Kathryn this demo is exactly what I would like my site to look like.What I am trying figure out is how do I get the blogs to appear under the header image. Do I make a separate blank post page and static page which I did,but the posts don’t show up.https://www.siobhandempseyartist.wordpress.com
I set the reading setting to posts. . Thanks in advance.

@vonie – looks like your site is on WordPress.COM, so you need to get support on their forums here:

https://en.support.wordpress.com/

There are differences between .com and .org – see: https://en.support.wordpress.com/com-vs-org/

Thanks Yogi

vonie – looks like you got things sorted out on your site, but if you still need any help, do feel free to post in the Themes section of the WordPress.com forums, as WPyogi mentioned.

https://en.forums.wordpress.com/forum/themes

See you there!