Change Post/Page Icon & Title

Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here

Last Reviewed: 28-Aug-15 (3.4.8) 3.1-3.4.*

Where to copy/paste this code?

NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. Use a Child Theme.

The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

Remove the Post Icon:


Remove the Page/Post Icon/Title:


Center the Page/Post Title:


Remove the Pencil icon on Posts:

 Credit: @tomaja. Fix identified by @Michael


Replace the Page/Post Icon with your own image:

  Credit: @Michael


Use different Icons on different Pages:

The icons are based on the Entypo font. Refer to this Entypo Link to see the full range of icons available.
Then choose the desired icons, ignoring the ‘U+’
Use F12 to bring up the Code Inspector. View the source code for every Page to be changed, and note down the page-id-n in the head code.
Add the following code using the page-id-n’s from the previous step.

Where to copy/paste this code?

NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. Use a Child Theme.

The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

  Credit: Inspired & Tested by @cesar

Related Snippets you may also like

We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.

82 thoughts on “Change Post/Page Icon & Title

  • ankiita

    How can I add ” symbol in the post title? I mean I have written that in title but cannot view on page.

  • Steven Spray

    The code in the article above did not work for me.

    The following one did and the statement even more pithy!

    .format-icon {
    display: none;

  • Mario D

    I have changed my front page through the menu of admin from showing posts to showing a static page.
    Everything works fine, but the boxes below the featured pages do not show the titles of the pages.
    So, when i select “static page” for the front page something happens and the titles of the pages are not shown.
    When I select “show posts” in the front page everything works fine.
    Any idea about this? How can i show the titles when I select “static page”?
    Thank you and hope to hear from you.
    .p.s. cool theme!!!!!!!

  • Ralf

    Thank you for your great theme!

    Using different icons on different pages is working fine like you described it above.
    But instead of creating a new css entry for each page, I prefer to create it dynamically.
    I searched the internet for using php in css but as I’m not a programmer, I don’t get it work.

    My idea:
    In admin/pages, I created a custom field “icon_value” and inserted for each page the icon value (Perhaps it’s better to use the icon name?).

    In css, instead of using

    I tried with


    But obviously the php code is not interpreted. What do I have to change?

    Thanking you in anticipation for your help!

  • Mimgoce


    I am using customizr as for my websites theme and very happy about it. I just updated some pages recently and now would like to remove the page title specifically for “projects” page in my website, and used the below code to achieve it.

    However, it seems that there is something wrong with the code as nothing changes. I could have managed to remove the icon before but could not succeed in removing the title.

    Many thanks in advance for the support.

    Best regards,

  • Marie

    Hi ! I used this to change the icon with an image of my own : #main-wrapper .format-icon {
    position: relative;
    padding-left: 50px;
    } #main-wrapper .format-icon:before {
    content: ” “;
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    display: block;
    background-image: url(“/wp-content/uploads/2015/02/icone.png”);

    It worked very well when I was in local, but now that I changed to a “real” server, I can’t make it work again πŸ™ The icone is missing (which is well) but my image doesn’t replace it !
    Would you have a solution ?



    • Nicolas

      The background image has a relative path in your CSS code.
      You’ll want to use an absolute path ( in other words, the full url) of the image file on the real server.
      Hope this helps !

  • Angelo

    Hi, great theme, i love it thank you very much guys!

    i have a problem and i don’t know if it’s a theme problem or a WP problem. Using Google WebMaster tools i can detect that my post has problems with entry-title, author and updated tags …:
    Error: Missing required field “entry-title”.
    Error: Missing required field “updated”.
    Error: Missing required hCard “author”.

    I looked for the solution in the internet and most of the solutions are base on a php coding and a single.php file of the active theme.

    Is this the way i have to follow? Can i code in the child theme?

  • Widdler Harrington

    I’ve tried Removing the Post/Page Icon/Title with the snippet given at the top but I still see no change. The icon is gone but the pages title is still there. What can i do to remove it? Thanks.

  • Eva


    I followed to the point all you wrote about how to remove this pecil icon from a blog post and I didn’t manage to do that πŸ™
    Could you please have a look and tell me what is the code to be used in my custom CSS? I really want to get rid of this red pencil icon.

    thank you very much!!!

  • MitMak


    I need to change the page icon (the little image that get displayed on the left side of the Page Title), with my own image. I understand from the posts that there is a CSS code below to do that.

    But, I need to change the Page icon for all pages AND with different images. So, each page would have its own page icon. Is it possible to do that?

    Needless to say, I really appreciate this great theme with all its features and simplicity.


  • Chris

    Thanks Nicolas! I figured it out. This code removed the space and horizontal line between the main header (just below the grey bar) and the main page (content) section.

  • Ryan Gardiner

    Wow! Sorry mod for all the postings – Maybe you can make one good one for me!

    Don’t forget to initiate the PHP with

    • Nicola Bhalerao

      Ryan, I would really like to do what you have suggested, and have the featured page image immediately to the left of the page title. With your various replies I am unsure which snippets of code to place where. I have set up a child theme, with style.css and functions.php, so am I looking to place code in there?

      • Ryan Gardiner

        Hi Nicola,

        I’m not too sure how it works for Child themes .etc, I just add the following snippet of code to the top of each page/post – Mainly because I’m lazy but also because if the page doesn’t have a featured image, it displays a nasty ‘Image cannot be displayed’ icon. I’m sure you could alter the PHP to get rid of that mind, I just haven’t had chance. The reason I have so many posts is because the code editor on this thread absolutely slaughtered every attempt, my code is a blend of CSS & PHP but this site will only allow one language at a time – Fingers crossed this works, I’ll have to put it in 2 snippets. (It’s worth mentioning that you’d need to have a PHP plugin for this to work – I use ‘PHP Code for Posts’ from the WordPress Plugins)

        I hope this comes out okay in the post and is of some use to you πŸ™‚

      • Ryan Gardiner

        The top code needs to be wrapped in STYLE tags.

        On another note… Dear mod, your syntax highlighter is awful, please get a new one πŸ™

      • Ryan Gardiner

        One more thing, the above doesn’t work for Mozilla Firefox so it just displays the bog standard lil icon thing :/ – I couldn’t find CSS selector for the Firefox browser… maybe someone can help there!

  • Ryan Gardiner


  • Ryan Gardiner

    Wow the syntax highlighter slaughtered that, let me try again:

    Also forgot to mention, you’ll need to get a PHP plugin for you text editor (like this:

    .safari .format-icon:before,
    .chrome .format-icon:before {
    opacity: 1;
    content: url(ID ) ) ?>);

  • Ryan Gardiner

    For everyone trying to change the lil icon, I’ve made this work around that will dynamically use the featured image, so you don’t have to copy and paste the IMG url every time. I’ve found around 40px x 40px to be best suited for before the page title.

    Note this may interfere with other stuff so you might need to edit it further depending on your site – But it achieved what I needed.

    Just include this code in your page/posts.

    Took me a while to find out how to use the featured image so hope this helps someone else out stuck in same position!

  • Mike

    I’ve been trying to figure out (unsuccessfully) how to post ALL posts to a specific page (that is not my home page). I want to keep the home page the way it is, but I want all my posts to go to a different page titled “BLOG” that is unassociated with the first page. I seem to be coming up with nothing. I’ve searched this website as well as other websites trying to find an answer. Normally, I find all the answers I need on this website without having to write a comment (I’ve been working with customizr for months now), but this seems to be one issue I cannot find a resolution for – If anyone can help me figure out how to turn a PAGE titled “BLOG” into the automatic location that POSTS get POSTED TO, that would be great. My goal is to put the “BLOG” page on my navagation menu, so that visitors have the option to see the blog (and all posts within that page), but I do not want the blog to be fed into the home page, nor do I want to alter the home page – Help?! Thanks!

    • Nicolas

      Hi Mike,
      In the WordPress customizer, go to Front page > Front page displays. Select “Static Page” and you’ll see a “Posts Page” drop down list toggling.
      Then choose the page of your posts in the “Posts page” list, and select a static page for home in the “Front Page” list.

      You are right, this information is not clearly stated in this website, I will add it in the FAQ page.
      Thanks and hope this help!

  • Alex Sirota

    This post is really great Dave! Thanks for submitting such great code snippets here. On we have several categories of posts. Is it possible to change the default icon for the category to be unique on a per category basis? Ideally I’d like to use a set of icons, one icon per category. I don’t want to change the post/page icon but rather the default “folder” icon and set a different icon for each category.

    Thanks for any insight you can lend.


  • Dylan

    I’m trying to delete the entire space where the title is, but so far I haven’t managed to do it. I’ve implemented the code here, but only managed to delete the title and not the entire space (seen on the website between the menu and the photo slider at I want to the photos to appear just under the menu without the awkward gap. Any help would be great.

    • Dave Bardell Post author

      Dylan, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include the link to your Site.

      • Naomi

        Thanks so much for the snippets! I am trying to replace the icon with a new image. I copied and pasted the code and updated with my image url and it worked. But, the image is very transparent, is there a way to remove or adjust the opacity? Thanks a bunch!

  • Michael

    Here is how to replace the icon with your own image, for anyone who is wondering

    upload your icon to your media and edit: wp-content/uploads/2014/02/feather.jpg
    with your own media file!

  • Michael

    Hey developers, I wanted to mention this! Everywhere the css says: .blog
    .blog does not work, what works is .post {

    I’ve noticed this for over a month now!

  • Sam

    Hi, I am trying to remove the little icons that go with posts (the little pencil). I think the above code you include is what I need but could you advise where I am supposed to put it in please?
    Apologies for the silly question!

  • Ivan Schustak

    Do you happen to have a way to adjust the appearance of the post titles on the post page? I’m looking to change them from being h1 to either h2 or h3 so they aren’t as big. Many thanks in advance!

    • Dave Bardell Post author

      OK, sorry about that. I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

  • Julia

    Hi Dave,
    the snippet works well! Thanks! Is it possible to remove the line underneath the title also?

    • Dave Bardell Post author

      To remove the first line, use:

  • Ingga


    I love this theme so far and the support is very helpful.

    I have used the code snippets given above without any trouble at all. However, in one of the menu in my page that I am working on, I planned to have posts under several categories. I managed to get this done by putting the categories under the main page but now, it shows the icon and page title of the category instead and the codes above are not able to remove it. It shows as : ‘folder icon’ ‘Category Archives:’ ‘Category Name’. Can someone please assist me on how to fix this?

    Thank you very much πŸ™‚

    • Lenaluna

      I’ve managed to remove the icon on the Category page by using the following snippet

      What I would like to remove as well is the set part of the Category title “Category Archives :” and just show the Category name. Any suggestions? Thanx much!
      Sorry, I don’t have a link available yet as I’m still working on it locally.

      • Rocco Aliberti

        Hi LenaLuna you can achieve that putting the following code in your child-theme functions.php:

  • Cesar

    How can I set a different Page Tittle Icon for every page I have in the site?
    Thanks a lot.
    Amazing job!

  • Andrew Brockman

    I notice that adding the code to remove the post/page icon works great, but when viewing on my iPhone it’s still there. How do I remove from all browsers and mobile? Are there separate css settings for mobile?

    • Dave Bardell Post author

      Most of these Snippets are tested standalone, so it is possible that when added to other CSS code they don’t work quite as intended.

      I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.

      This Snippet tells you about modifying CSS for different viewports.

  • Dan

    Is it possible to include a different image instead of the default page icon? I can remove it but cannot figure out how to swap in a different one. Thanks!

    • Nicolas

      Hi Dan,
      You can easily change the icon. It uses the ‘entypo’ font-icon. Just choose a new icon ( all the icons and their code are here : and put the new code in the content property.

      For example if you want a vcard style icon use the following code

      • Jorge

        The above code didn’t work for me. Also when I try to change to a different icon on a page I’m just getting the number representing the icon but not the actual icon. Any suggestions?

        Can I change that icon for my own image?


        • Bruce Wilson

          Jorge; I’m having the same problem. I haven’t uploaded the icon package…could that be the problem? I too just get the letters for the icon I’m hoping to use. From the directions at the top of the page, I read: “Then choose the desired icons, ignoring the β€˜U+’” What does it mean to “choose them”. I have their coordinates, but does that translate to having them expressed through the code without uploading the individual icons for reference within my website?

          • Dave Bardell Post author

            Did you sort this?

            If not, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

  • Lilla

    Hi Dave; I always appreciate your code snippets. I’ve entered the one for “Remove the Pencil icon on Posts” but it’s not working. The blog on my site is called something else, does that mean that I need to change the snippet to reflect that?

    • Lilla

      Okay, managed to figure out why it wasn’t working. I had copied some extra characters that was messing up the code snippet. Works like a charm. Thanks.

  • Pablo

    Dear Dave,

    I tried the snippets on my site but I’ having trouble removing the Post/Page Title. The other two (remove Icon and the center title) work just fine, but the other one doesn’t work.


  • Maurits Dekker


    Loving your template but can’t figure out how to remove post/page title. Could it be that the code is incorrect. All the rest is working fine for me. Hope you can help.



Comments are closed.