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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Change Read More Link Into a Button

This code enables you to make the read more link into a button.

Here’s the result:

read more button

And here’s the code which you can add to your child themes functions file. The code assumes you’re using the Genesis > Content Archives > Content Limit setting.

display post content

The PHP code replaces the read more class with the button class and uses your themes existing CSS to style the button.

If you’re using the setting to display excerpts or not using Genesis, use this code instead which works when displaying the excerpts in any theme:

Most StudioPress themes already include CSS for styling buttons.

Sample Button CSS

If your theme doesn’t include CSS for buttons, you can use the following in your style.css file and change the colors to match your theme.

.button {
    background: none repeat scroll 0 0 #ff8a00;
    box-shadow: 0 2px 0 #d73200;
    float: left;
    font-weight: 700;
}

.button:hover {
    background: none repeat scroll 0 0 #ff9b2f;
}

To style your button further, you can add another class to the PHP code like this:

And use CSS to style your read more buttons only without effecting the styling of other buttons:

a.read-more {
    display: block;
	text-align: center;
}

The above CSS will center the button.

center read more link button

Read More

Reader Interactions

Comments

  1. Colin W says

    October 27, 2014 at 7:37 pm

    As always – another great tut. Thanks Brad!

    Log in to Reply
    • Brad Dalton says

      October 28, 2014 at 5:12 pm

      No worries Colin

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.