• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

Vertical Flex alignment with space between

Move Genesis Read More to Entry-Footer

November 15, 2017 by Pat Fortino

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.

Vertical Flex alignment with space between

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.

Filed Under: Genesis Leave a Comment

Previous Post: « Show Modern Tribe Event Tickets on WooCommerce Shop Pages
Next Post: Github Gists Custom Syntax Highlighting »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...