I recently created a new theme for my site and wanted all blog items to be equal height, with the content aligned vertically at the top and bottom of the column.
The first step was to move Genesis Read More to Entry-Footer. By default, Genesis adds the read more link at the end of the excerpt or truncated content, at the end of the last text element; for example, the last paragraph.
The advantage of moving the read more to the entry footer is that each post element can be aligned vertically. In each row, every blog post is equal height. See my blog page for a live preview.
In the image below, the following alignment applies:
- The header element – contains the featured image, the title, the date, and the author. It aligns with the top of each post entry.
- The content element – contains the content excerpt. It aligns with the middle of each post entry.
- The footer element – contains the read more button. It aligns with the bottom of the post.
Note: The tallest element sets the row height. In the example below, the left element has a title that spans 3 lines, making it the tallest element.
Modify the Read More Text
The following code modifies the Read More text; it removes the read more link and adds “…” at the end of the content. The reason for the three filters is to cover all three scenarios in your genesis Content Archive theme settings: entry content, entry content with character limit, or excerpt.
Move Genesis Read More to Entry-Footer
The following code creates a read more link and adds it to the genesis entry footer.
On line 3, the code checks for various conditions: if it is the front page or thearchive page or the search page and it is NOT the portfolio archive, then run the code. You can modify these conditions to suit your needs. See WordPress Conditions for more information.
In the echo statement, you can change the link class. I added the button class so the read more button will look like all other buttons on my site.
You also change the ‘Read More’ text to whatever you want.
Finally, there are two actions at the end. The first action,
add_action( ‘genesis_entry_footer’, ‘wnd_excerpt_more’);
adds the read more to the blog entry footer.
The second action, add_action( ‘gsfc_after_post_content’, ‘wnd_excerpt_more’ );
adds the read more to the home page widget. The home page widget uses the Genesis Sandbox Featured Content Widget. If you don’t use that plugin, delete this action or comment it out.
For more information on the css I used to vertically align the flexbox items, see Align Flexbox Items Vertically Top to Bottom.
Leave a Reply