Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding a custom post type icon

From: Create an Online Portfolio with WordPress

Video: Adding a custom post type icon

By default all new custom post types have the same default icon as the regular posts, but they don't have to. Using a simple batch of code along with some graphics, we can change the icons for each of the post types to further identify them as separate and different entities. To do this we first need some new icons. You can go online and you can find a free icon set and use that or you can make your own icons. The sizes change a little bit between the icons that are on the sidebar here and the icons that are larger in the actual view.

Adding a custom post type icon

By default all new custom post types have the same default icon as the regular posts, but they don't have to. Using a simple batch of code along with some graphics, we can change the icons for each of the post types to further identify them as separate and different entities. To do this we first need some new icons. You can go online and you can find a free icon set and use that or you can make your own icons. The sizes change a little bit between the icons that are on the sidebar here and the icons that are larger in the actual view.

So you basically need to create one icon for the sidebar and one for the main view. If you gave access to the full set of assets for this course, I've created some icons for each of these three new post types and that's the ones we're going to hook in, but like I said you can use any icon you want. You just have to create the graphics for it. First we need to place the images that we're going to use into our themes folder. So I'll go to wp-content in my WordPress installation and then into themes. Like would the posttypes.php file we want the images to be available for all the themes that will be using these post types.

We're going to put the images folder in the themes folder rather than in the individual folder for the themes. This is not technically proper to do in WordPress, but it'll help us have one set of files that we can use for all our themes. So I'll go into my Exercise Files under Assets and find a folder called images. I'll copy it into the themes folder. Under images you'll see we have images for photo, recipes, and video, so there is a small one and regular size one smaller.

The small one goes on the menu; the regular size one goes when you open each individual item. Now though we have the images in the right folder we need to call them in using cascading style sheets, but we're going to do this from the posttypes.php file using some clever code. So first I'll go to the posttypes.php file and scroll all the way to the bottom, then I'll go to my code-snippets and find the code-snippet under 3.6. As you can see here I commented in. It says Add new Custom Post Type icons and the batch finishes at this incomplete PHP delimiter.

This is very important and I'll show you why in a second. If you copy this code all the way up to the comment and paste it in, you'll see that the PHP delimiter starts here and then it ends down here, because our original posttypes.php file had an end PHP delimiter at the bottom. This is happening because this function actually introduces a set of style code and this is not PHP. This is straight up CSS and HTML. We have to escape our PHP delimiter so that we can display the regular content and then we have to reintroduce it at the bottom of the function.

From the top this function called cooking_icons introduces new style code for the icons in WordPress Admin. As you can see there are two icons per post type. You see it says menu-posts-recipes where recipes is the post type and then it says menu-image and then we're calling a background image. We're calling the url to decide itself, so that we can use this regardless of what side we're using it on and then it navigates to wp-content/themes/ images and then recipessmall because this is a small one and then the same thing for icon32, which is 32x32, posts, and recipes. This is the large icon then we'll call the recipes.png file.

It's just the same thing happening for each post types we have recipes, we have photos, and we have videos. When this is called this new style code will be appended in the header of our pages and therefore we'll display when you're in the Admin Panel. As you can see here at the top of this new function it says add_action and it's inserted at admin_head rather than at in it. That means it'll be injected into the head tag of the site and then it's just calling the cooking_icons function directly underneath.

When I save this in posttypes.php and go to WordPress Admin, you'll notice that the icons on the side here will change. So reload it and you see that now Recipes has a recipe book, Photos has a camera, and Videos has a video camera. And when I click on Recipes, we get a large recipe book. When I click on videos we have a large video camera. Again these are subtle introductions, but they make a big difference because we now see that there is a visual difference between each post type, and you can use this on every single item in WordPress Admin so that you can truly identify what's going on and make it easier for the end-user to use the Admin Panel to understand what they are doing.

By adding a custom icon to each of your custom post types, you give the admin user a visual cue that they are now working with something other than a regular post. It's again a subtle thing, but it makes a huge difference.

Show transcript

This video is part of

Image for Create an Online Portfolio with WordPress
Create an Online Portfolio with WordPress

40 video lessons · 28699 viewers

Morten Rand-Hendriksen
Author

 
Expand all | Collapse all
  1. 6m 28s
    1. Welcome
      58s
    2. Using the exercise files
      3m 54s
    3. Using the code snippets file
      1m 36s
  2. 8m 31s
    1. What is an online portfolio?
      2m 43s
    2. Tour of the finished project
      3m 15s
    3. Setting up a WordPress development environment
      2m 33s
  3. 16m 10s
    1. Creating site architecture
      5m 1s
    2. Creating a child theme
      6m 7s
    3. Creating an external file to manage functions separately from the theme
      5m 2s
  4. 25m 26s
    1. What is a custom post type?
      2m 14s
    2. Setting up a custom post type
      6m 39s
    3. Adding advanced variables to the custom post type
      3m 35s
    4. Advanced custom post type functionalities
      4m 29s
    5. Changing the menu position of the custom post type
      3m 19s
    6. Adding a custom post type icon
      5m 10s
  5. 22m 8s
    1. What are custom taxonomies?
      3m 34s
    2. Setting up a basic custom taxonomy
      2m 52s
    3. Hooking a custom taxonomy to a post type
      3m 13s
    4. Adding advanced variables to a custom taxonomy
      3m 9s
    5. Using hierarchical and nonhierarchical custom taxonomies
      5m 54s
    6. Using custom taxonomies in admin
      3m 26s
  6. 25m 40s
    1. Populating content into the custom post types
      10m 54s
    2. Uploading videos to YouTube
      2m 22s
    3. Embedding YouTube videos in a custom post type
      4m 23s
    4. Uploading videos to WordPress
      8m 1s
  7. 39m 47s
    1. Creating custom post type templates
      6m 50s
    2. Adding taxonomy info to the custom post type template
      9m 13s
    3. Creating conditional custom taxonomy links
      4m 46s
    4. Handling multiple post type templates: Individual templates
      6m 25s
    5. Handling multiple post type templates: Consolidating everything in one file
      6m 21s
    6. Handling multiple post type templates: Making custom post types the default
      6m 12s
  8. 15m 23s
    1. Creating an index page for a custom post type
      8m 10s
    2. Creating a custom taxonomy index page
      7m 13s
  9. 12m 3s
    1. Creating a custom footer sidebar template
      6m 58s
    2. Displaying a list of links to the latest custom post type posts
      5m 5s
  10. 14m 58s
    1. Creating static pages for the front and the blog
      4m 54s
    2. Populating the menu with new index pages
      4m 52s
    3. Creating a contact page with a contact form
      5m 12s
  11. 5m 55s
    1. Including the abstraction layer in other stock themes
      5m 55s
  12. 1m 22s
    1. Next steps
      1m 22s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create an Online Portfolio with WordPress.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.