Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you display the excerpt, instead of the full content of a post on an index page, it's a good idea to provide a link to the post that is clearly visible. Yes, clicking on the post title will normally take you to the post, but that's not obvious to someone who has never visited a WordPress site or used the web before. Adding a dedicated link with clear instructions on what to do will provide a better, more logical and more communicative user experience for the visitor. In the design, I created a very clear continue reading link with an arrow at the bottom of each truncated post in the index pages.
And now we're going to add that in. Looking at the markup for the content of PHP template, we have an obvious location where we can place this link. It's in the footer that currently has the class entry footer. So here I want to place in a simple link that points to the current post, and I also want to add an arrow from fontawesome. And just a review, to add an icon from fontawesome, you can simply to go fontawesome.io. And find the correct insertion code. Here you see we have that i tag with the class for the correct icon.
if you go to the code snippets for this movie, you'll see here I have the footer and I've added an extra class called continued reading so that we can target specifically the link within it. And then I have the link itself. So I'm going to copy this out and replace the footer inside content.php. And here, if we look closely at the link, you'll see we start with a link. Then we get the permalink for the current post. And we set the title of the link to, continue reading, followed by the title of the post itself.
So if the post was called, Cats with Hats, it would say, continue reading Cats with Hats. We set the relation of the link to a bookmark, because it is a bookmark. And then finally, we display the words continue reading followed by the font awesome icon. And then we end the A tag. And all this is wrapped so that the translator can easily translate it. Now, I can save my new footer. And go back and reload my index page. And you'll see we have a link down here that says continue reading, followed by the icon.
And because I put this into the content of the php template, this new link will propagate throughout all of our archive pages. So now that we have the mark-up, we need to add the style, because right now the link is too small and the icon is jamming right up against the text. So here I'm going to go back to my cold snippets and find 2 very basic rules. So I'm going to copy out everything including the comment here, go to style.css. And if you look at the table of contents for underscores you'll see there's currently no area for index pages, so I'm going to add a new area for index pages inside content after comments.
So I'm going to first navigate to 11, and then directly above 11 I'll paste in my new code so this will eventually become 10.4. And within this code you see I target the continue reading class that we added to the footer. So here you see we have the continue reading class. And I say anything with in the continue reading class has a margin of four rems on the top and the bottom, font weight of 900, and font size of 18. And then finally, I'm targeting the I tag within the continue reading class, so that is the icon.
And I'm giving that a margin on the left of .5 Ms, so that it separates from the text. Save the style sheet, reload my page, and now we have a nice link at the bottom of each of our posts and index pages. Now I can go to any other archive page and see that we have the same link on the bottom. Click on the link. You go straight to the individual post.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65971 Viewers
61 Video lessons · 96599 Viewers
56 Video lessons · 110325 Viewers
82 Video lessons · 105124 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.