Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When an author creates a post in WordPress she has the ability to make that post sticky, meaning it's taken out of the reverse chronological order of the index pages, and instead placed as the first post. This can be a useful function if you want to resurrect an old post, or just want to make sure a particular post is always the first thing people see when they visit the site. In the theme unit test data, there is a sticky post. It's called Template: Sticky, and it always displays as the first post on the index page.
As a theme developer, it's important to clearly indicate to the visitor that this is a sticky post. This can be done with alternate styling, wording, graphics, or anything else. In my theme, I'm going to use this thumbtack icon from Font Awesome, and place it in the top righthand corner of the post, so that it's clearly indicating this post has been stuck to the front page. To identify a sticky post, I'm going to use a simple conditional statement and call in the function is_sticky.
Since I'm displaying the pin inside the content, I am going to go to content.php. And here I need to find where I'm going to place the pin, and I'm going to place it inside the header. So I'll make some space for myself. And then I'll put in a PHP delimiter. And close it right away, so I don't forget. And in here, I'm going to make a conditional statement. If is_sticky. So this will only happen if it's a sticky post. And then inside there I'm going to place the icon. So echo out the icon.
But first I need to get it from Font Awesome. So it's right down here. I'll get the code and paste it in. Save content.php, reload the front page. And the thumbtack appears. I'm also going to scroll down to make sure it doesn't appear on any of the other posts. And it doesn't. Which means we're clear. So, now we just need to style this so that it appears over here on the right hand side. So I'm going to absolutely position this. And first I need to apply a new class to the icon so that I can targeted it with my styles.
So I'll go in here add the class, sticky-post. Then I can go to my style sheet. And navigate to where I placed my archives and index styles, which is right before 11. So I'll navigate to 11. And here I'm going to create a new rule, sticky-post. And here I'll give the icon an absolute positioning. And position it one rem down from the top and three rems in from the right. So top one rem, right three rem.
And I'll test that in the browser. If it works, I'll just leave it. If it doesn't, I can mess around with the styles in the style sheet. But it does and this looks really great so I'm going to leave it just the way it is.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.