MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

How do I center my Read More button in Cassia?

Please note: This FAQ Article is specifically for the Cassia theme.



There are 2 ways to center your Read More button within the Cassia theme:
( 1 ) Manually within your post's create/edit screen, or,
( 2 ) by adjusting the theme's code.


1. MANUALLY CENTERING YOUR READ MORE TAG

Navigate to your post's create/edit screen.
After you have inserted the Read More tag into your post where you'd like the Read More button to appear within the content, switch over to the "Text" tab in the top-right corner of the text box field.

Center Read More Button Screenshot #1


You will see that, within this view, the Read More tag appears as:

<!--more-->  


To manually center the Read More button, you will "wrap" the above Read More tag element with "p tags" that have some styling attached. This will look like:

<p style="text-align: center;"><!--more--></p>


Please note that, with this method, you will need to do this for each post's Read More button.




2. AUTO-CENTERING YOUR READ MORE TAG VIA CODE ADJUSTMENTS

Open up the theme's file called "index.php" and look on Line 95. You will see the following:

<?php the_content(__( 'Read More', 'cassia' )); ?>


Replace this line of code with the following instead:

<?php the_content(__( '<span class="more-button">Read More</span>', 'cassia' )); ?>




Be sure to save these changes made to the file when you're finished.

Next, go to Appearance > Cassia Options > Custom CSS and add the following:

.post-entry a.more-link {display: block; text-align: center; background-color: #fff;}

.post-entry .more-button {
    background-color: #4fb8a6;
    color: #fff;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 3px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
    display: inline-block;
    font-family: "Playfair Display";
    transition: .3s;
}

.post-entry p a {border-bottom: none !important;}




This should automatically center your Read More buttons for all past and future posts.