WordPress Excerpt Tutorial

by birtanpublished on July 3, 2020

hello everyone welcome to another

WordPress tutorial in this lesson we'll

be learning how to add read more links

or excerpts to our website so for

example in front of you you can see a

blog post now we probably don't want to

output the entire body text of this blog

post on the initial blog listing screen

we likely only want to output the first

30 to 50 words and then include some

sort of a read more link and then if a

user clicks on that it then takes them

to the full article with the full text

well in this lesson we're going to

review a few different paths that we can

take to achieve just that so let's get

started your first option is to edit the

post that you would like to add and read

more link to so this one is titled

alternate opinion post I will hop over

to my dashboard click on posts here's

the one that I'm interested in okay so

let's say I only want mmm the first

paragraph to display and then I want to

read more link I simply place my cursor

at the end of the paragraph and then

there is this insert read more tag in

the WordPress content editor so if I

click that it will add this more line

now if I click update and then if we go

and refresh the actual website you can

see that it's that simple there's now a

more link and if I click that it takes

me to the full article now really

quickly let's hop back over to the

dashboard again and I want to point out

that we were using the visual editor

that WordPress offers but if you click

the text if you use the text version of

the editor the same exact behavior

applies you can simply click this more

button and it will insert this code that

functions the exact same it's just a

code representation of this more line

you may be thinking okay but what if I

don't want it to read more dot can I

customize it you absolutely can so in

your code editor go ahead and open up

whatever theme page you're interested in

editing in this case I'll be editing

indexphp and look for where you're

outputting the content look for where

you're using the the content function

inside the parentheses for the

function single-quote now you can

include any text you'd like so if I want

to say continue reading and then arrow

is the symbol for a right facing arrow

if i refresh we can see that that takes

place it's that simple to customize the

text so we can see that the word press

read more button is very powerful and in

certain circumstances it's your best bet

however there are other options out

there so please do not think that this

is your only option because the old

saying goes if your only tool is a

hammer you begin to treat everything as

if it were a nail for example this is

our blog listing page you can see we

have multiple blogs on this page or

excuse me multiple blog posts and what

if we don't want just some of them to

have a continue reading link what if we

want each and every one of them to only

display you know a few sentences and

then have a read more link well in that

case maybe it doesn't make sense to rely

on manually adding a read more button

from the content editor maybe we should

do things a bit more programmatically if

that's the case then I recommend

temporarily ignoring the read more

button and instead hopping over to your

code and instead of using the the

content function let's use the the

excerpt function now you can see that

every post on this blog listing page now

uses the excerpt well what is the

excerpt you asked in your wordpress post

editor you probably won't see the

excerpt field by default but if you

scroll to the top and you click on the

screen options tab you should get some

sort of a slide down and then look for

the excerpt check box and check it now

if you scroll down you'll see this new

field named excerpt and if we add custom

text in here

and go ahead and click update we can see

that this post is using that custom

excerpt text that we just input now if

we click on this post we can then see

here is the full body text now on this

blog listing page you can see that we

didn't manually enter excerpts for any

of these other posts WordPress's

automatically because we left that field

empty for all these other posts it's

automatically grabbing the first 55

words of the post and only outputting

that so if I click on this post here's

the full text a quick side note for any

of you who have been following along

this entire WordPress video series we

need to make sure that our theme folder

has a file name single dot PHP so if

you've been following along you'll

notice that we haven't created this file

together yet I just created it behind

the scenes and all I did was duplicate

index dot PHP and change this line where

we just changed this to the excerpt one

single dot PHP I just changed it right

back to the content so if you've been

following along just go ahead and make

sure to make that change as well but if

you're really just trying to adjust a

different theme then this doesn't matter

at all because your single dot PHP file

should already be good to go so moving

on if we head back to the home page you

might realize that when we were using

the content and then clicking the read

more button in the WordPress content

editor we had a nice read more or

continue reading link but now that we're

using the excerpt instead we get in this

case nothing and in this case brackets

with three dots neither of which is very

useful so what if we would like to add

back in that read more or continue

reading link it's actually fairly simple

we'll head over to indexphp now

remember where we just changed this from

the content to the excerpt for our home

page well we're actually going to change

it to get the excerpt and what this will

do we obviously need to echo it then

it will return the excerpt text but it

won't try to help us with HTML which

means we need to wrap our own paragraph

tags around it and then directly after

the excerpt we'll just manually include

our

read more link so we will say create a

link says read more oops they right

facing arrow and for the actual URL

value can just drop into PHP and say the

permalink okay so now if we refresh you

can see that it's that easy we have read

more links and if we click them or take

into that page okay so now that our

excerpts have a read more link the next

step would be to customize the length of

the excerpt itself so by default I

believe WordPress will grab the first 55

words but let's say you wanted it to

only be 25 words

well it's quite easy to customize let's

head over to our functions dot PHP file

and our theme folder I'm going to create

a new comment that says customize

excerpt word count length okay and we're

just going to create a new function

named custom excerpt length you could

actually name this function anything you

would like and then inside the function

all we want to do is return an integer

so I will say return 25 okay so that's

all the code we need for the function

but now we need to tell WordPress to

actually run this function at some point

so WordPress has a function named add

filter and this will allow us to hook on

you can almost think of them as events

but in this case we're going to hook on

to a filter named excerpt length and

then we get to say what we want to

replace the default behavior with so we

want to tack on two excerpt lengths and

then we want to replace it with this

function that we just created aimed

custom X or plain so now add a semicolon

and if we refresh you can see the

excerpts are now only using 25 words

instead of 55 so now that we see how

excerpt works you might be thinking to

yourself hmm well I would like to have

the best of both worlds what if on my

home page I want to display the full

complete text for posts if I don't enter

an excerpt

but if I do enter a manual excerpt then

only show the excerpt well that's

actually not that difficult to set up so

let's hop over to our indexphp file and

we're going to add some new code right

around this area we'll use an if

statement so we'll say once we drop into

PHP we'll say if the current post is

being looped through has a excerpt then

we'll do something but if it doesn't

else then we'll do something else okay

so now it's just a matter of placing

this code in the brackets that will run

if there is an excerpt and I'll drop

into and out of PHP where it's

appropriate and then in this set of

brackets this is what happens if there

isn't an excerpt so then we simply just

want to output the content so if we

refresh you can see that our first post

because remember we entered a manually

crafted excerpt in the excerpt field

it's only displaying the excerpt with a

read more link but these other posts

because we didn't enter anything in the

excerpt field they're simply displaying

the full text so as you can see there's

a lot of different options for how you

want to use read more links and excerpts

but hopefully this video gave you a good

introduction as to what's out there and

how you can achieve what you would like

so thank you very much for watching I

hope you feel like you learn something

and stay tuned for more WordPress and

web development tutorials thanks bye

Related Videos

Be the first to comment “WordPress Excerpt Tutorial”

Your email address will not be published.

There are no comments yet.