Lab Introduction

Skip to episode playlist

Let me introduce the lab to you to what you will be building. Out-of-the-box, the Genesis framework uses a read more link which is inline with the content (at the end of it) and has the following text: [Read more...]. In this lab, you will be doing multiple tasks to show you how to customize the read more link for what your project needs. You will be doing:

Move the read more link to a separate line by wrapping it in p tags
Change the text from [Read more...] to Continue reading (or whatever you want)
Style it to be a button

Here is the code for you. You can just copy this code into your theme. But if you want a thoroughly explanation, then you will want to take the Pro version of this lab.

Get the Code Here

	Here are the instructions for you:

	1. Watch the video that walks you through this
	2. Create a new folder in your theme's `lib` folder called `structure`.
	3. Inside of `structure`, add the `post.php` file below. Just copy and paste it into that folder.
	4. In your `functions.php file`, paste this line of code: `include( CHILD_DIR . '/lib/structure/post.php' );`, which loads up your new `post.php` file.
	5. Now in your `style.css` file, you need to find the following:

	a. find here the `button` style is and then add `.more-link,` above it. Watch the video to see where to do this.
	b. find the `button:hover,` and then add this above it: `.more-link:hover,`.

	Customize the text `Continue reading` to be whatever you want it to be on line 25 in the `post.php` file.

	Happy Coding!

view raw

instructions.txt

hosted with ❤ by GitHub

	<?php
	/**
	* Post structure handling
	*
	* @package Altitude
	* @since 1.0.0
	* @author hellofromTonya
	* @link https://knowthecode.io
	* @license GNU General Public License 2.0+
	*/

	add_filter( 'the_content_more_link', 'altitude_change_the_read_more_link' );
	add_filter( 'get_the_content_more_link', 'altitude_change_the_read_more_link' );
	/**
	* Change the Read More Link HTML Markup and content.
	*
	* @since 1.0.0
	*
	* @param string $html
	*
	* @return string
	*/
	function altitude_change_the_read_more_link( $html ) {

	$html = altitude_change_read_more_text( $html, __( 'Continue reading', 'altitude' ) );

	if ( doing_filter( 'get_the_content_more_link' ) ) {
	$html = altitude_strip_off_read_more_opening_dots( $html );
	return '</p><p>' . $html;
	}

	return sprintf( '<p>%s</p>', $html );
	}

	/**
	* Strips off the read more link's opening dot pattern.
	*
	* @since 1.0.0
	*
	* @param string $html
	* @param string $dots Dots pattern to strip off
	*
	* @return string
	*/
	function altitude_strip_off_read_more_opening_dots( $html, $dots = '… ' ) {
	return substr( $html, strlen( $dots ) );
	}

	/**
	* Replace the read more text from the Genesis default text of '[Read more...]' to
	* the new specified replacement text.
	*
	* @since 1.0.0
	*
	* @param string $html Read more link HTML
	* @param string $replacement_text Replacement text
	*
	* @return string
	*/
	function altitude_change_read_more_text( $html, $replacement_text ) {
	$text_to_replace = __( '[Read more...]', 'altitude' );

	return str_replace( $text_to_replace, $replacement_text, $html );
	}

view raw

post.php

hosted with ❤ by GitHub

You will grow in this profession when you incrementally and systematically stretch yourself....bit-by-bit.

Episodes

Total Lab Runtime: 01:27:22

1 Lab Introductionfree 04:20
2 Basic Code Overviewbasic 06:34
3 Markup & Code Setuppro 09:13
4 Let's Look at Genesis' Codepro 11:09
5 Let's Customize the HTML Markuppro 11:35
6 Change "[Read more..]" Textpro 09:39
7 Get Rid of the Dots Before the "[Read more...]"pro 13:24
8 Style Like a Buttonpro 05:44
9 Clean Up the Codepro 03:41
10 Handling the Read More When There is No Content Limitpro 12:03

Back to the lab's opening page.

Lab: Customizing the Read More Link in Genesis

Episodes

Learn

Help

General