Change Post/Page Icon & Title 57


Last Reviewed: 28-Mar-14

If you need to remove or move the Post/Page Icon & Title:

Where to copy/paste this code?
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/Page Icon:

Credit: @acub
 

Remove the Post/Page Icon/Title:

 

Center the Page Title:

 

Remove the Pencil icon on Posts:

 Credit: @tomaja. Fix identified by @Michael

 

Replace the Post/Page Icon with your own image:

  Credit: @Michael

 

Use different Icons on different Pages:

Important
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.

  Credit: Inspired & Tested by @cesar


About Dave Bardell

My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme. Have learnt a lot from other Supporters (@acub, @tomaja, @ElectricFeet, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com


57 thoughts on “Change Post/Page Icon & Title

  • Reply
    Maurits Dekker

    Hello,

    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.

    Greetz,

    Maurits

  • Reply
    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.

    Pablo

  • Reply
    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?

  • Reply
    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!

    • Reply
      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 : http://www.entypo.com/characters/) and put the new code in the content property.

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

      • Reply
        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?

        Thanks

        • Reply
          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?
          Bruce

  • Reply
    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?

    • Reply
      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.

  • Reply
    Ingga

    Hi!

    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 :)

    • Reply
      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.

    • Reply
      Dave Bardell Post author

      To remove the first line, use:

  • Reply
    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!

  • Reply
    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!

  • Reply
    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!

  • Reply
    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!

  • Reply
    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 http://www.dylanconnole.com). I want to the photos to appear just under the menu without the awkward gap. Any help would be great.

      • Reply
        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!

  • Reply
    Alex Sirota

    This post is really great Dave! Thanks for submitting such great code snippets here. On http://www.insightaas.com 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.

    Alex

  • Reply
    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!

    • Reply
      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!

  • Reply
    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!

  • Reply
    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: https://wordpress.org/plugins/exec-php/)

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

  • Reply
    Ryan Gardiner

    );
    }

  • Reply
    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

  • Reply
    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.

  • Reply
    MitMak

    hi,

    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.

    Thanks,
    MitMak

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">