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 Icon:
/* START OF Change Post/Page Icon & Title */
/* Remove Post Icon 3.3 */
article .format-icon:before {
content: none !important;
}
/* Remove Page/Post Icon 3.1/3.2 */
[.page or .post ] #main-wrapper h1.format-icon:before {
content: none;
}
/* END OF Change Post/Page Icon & Title */
Remove the Page/Post Icon/Title:
/* START OF Change Post/Page Icon & Title */
/* Remove Page/Post Icon/Title/Comment Bubble */
[.page or .post ] .entry-title.format-icon {
display: none;
}
/* END OF Change Post/Page Icon & Title */
Center the Page/Post Title:
/* START OF Change Post/Page Icon & Title */
/* Remove Post Icon 3.3 */
article .format-icon:before {
content: none !important;
}
/* Center Page Title 3.3 */
[.page or .post ] h2.entry-title.format-icon {
text-align: center;
}
/* Remove Page/Post Icon 3.1/3.2 */
[.page or .post ] #main-wrapper h1.format-icon:before {
content: none;
}
/* Center Page/Post Title 3.1/3.2 */
[.page or .post ] h1.entry-title {
text-align: center;
}
/* END OF Change Post/Page Icon & Title */
Remove the Pencil icon on Posts:
/* START OF Change Post/Page Icon & Title */
/* Remove the pencil icon */
.post h1.format-icon:before, .post h2.format-icon:before {
content: none;
}
/* END OF Change Post/Page Icon & Title */
Credit: @tomaja. Fix identified by @Michael
Replace the Page/Post Icon with your own image:
/* START OF Change Post/Page Icon & Title */
/* Replace the Page/Post Icon with your own image */
.post h1.format-icon:before, .post h2.format-icon:before {
content: url(/wp-content/uploads/2014/02/feather.jpg); /* Adjust the path/image name */
}
/* END OF Change Post/Page Icon & Title */
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.
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.
/* START OF Change Post/Page Icon & Title */
/* Default setting */
article.page .format-icon:before {
content: "\1F4C4"
font-size: 3em;
line-height: 0;
position: relative;
top: 14px;
}
.format-icon:before {
font-family: 'entypo';
font-size: 1.2em;
font-variant: normal;
font-weight: normal;
line-height: 1;
opacity: 0.2;
padding-right: 10px;
position: relative;
text-transform: none;
top: 8px;
}
/* Change page-id-n and the Entypo code in below examples */
.page-id-150 article.page .format-icon:before {
content: "\E722";
}
.page-id-64 article.page .format-icon:before {
content: "\1F4F7";
}
.page-id-105 article.page .format-icon:before {
content: "\1F4C5";
}
/* END OF Change Post/Page Icon & Title */
Credit: Inspired & Tested by @cesar
82 thoughts on “Change Post/Page Icon & Title”
Hi ankiita,
The symbol ” should display in the post title. Is there some plugin conflict?
How can I add ” symbol in the post title? I mean I have written that in title but cannot view on page.
Thanks.
How can I change the : Leave a comment text ?
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;
}
Hi,
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.
Regards,
M
.p.s. cool theme!!!!!!!
Hi Mario,
Please open a topic in the support forum about this : https://wordpress.org/support/theme/customizr
Thanks 🙂
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
.page-id-150 article.page .format-icon:before { content: "\E722"; }I tried with
.page-id- article.page .format-icon:before { content: "echo get_post_meta( get_the_ID(), 'icon_value', true)"; }and
.page-id- article.page .format-icon:before { content: ; }But obviously the php code is not interpreted. What do I have to change?
Thanking you in anticipation for your help!
Hi Ralph,
The inline CSS has to be declared within the
tags of your webpage.Since stylesheet files (.css) are not parsed by the php engine, you could create a callback php function hooked to wp_head where you render a dynamic stylesheet using your post meta.
You could also use the wp_add_inline_style() to do that.
I hope this helps!
Salut Nicolas,
Merci pour … ehm, thanks for your quickly and friendly help.
I found some tutorials (see below) to integrate php in css but as newbie I don’t get it work and your (WordPress-)terms (tag, callback function, hook, …) unfortunately don’t help me.
As I’m only a simple user and a beginner to programming and all that (rather: I know almost nothing), I unfortunately don’t understand what you’re telling me and I need rather a step-by-step instruction. If you could help me that way, I would appreciate very much.
Thanks a lot!
https://wordpress.org/support/topic/best-way-to-create-a-css-file-dynamically
http://code.tutsplus.com/articles/supercharge-your-css-with-php-under-the-hood–net-6409
Hi,
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.
/* Remove Page Icon/Title */ .page -id-1140 .entry-title.format-icon { display: none; } /* Remove Post Icon/Title */ .page-id-1140 .blog .entry-title.format-icon { display: none; } .page-id-1140 .entry-header, .featurette-divider { display: none; }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,
Mimgoce
Hi ! I used this to change the icon with an image of my own :
body.page:not(.home) #main-wrapper .format-icon {
position: relative;
padding-left: 50px;
}
body.page:not(.home) #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”);
background-repeat:no-repeat;
}
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 ?
Thanks,
Marie.
Hi,
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 !
Can I change also each icon for each post as in the pages?
Hi,
You can change the icons of the theme. Please refer to this section of the documentation.
I hope this will help 🙂
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?
Thanks!
Angelo
Hi,
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.
Hi Widdler, we are currently support this kind of issues in the Customizr support forum.
Please open a new thread in the forum and we’ll do our best to help.
Thanks 🙂
Dear,
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 http://www.macuisie.pl 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!!!
Eva
the correct address is : http://www.macuisine.pl
Hi, you don’t seem to use the Customizr WordPress theme
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.
/* Replace the Post/Page Icon with your own image */ .post h1.format-icon:before, .post h2.format-icon:before { content: url(/wp-content/uploads/2014/02/feather.jpg); /* Adjust the path/image name */ }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
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.
.entry-header { display: none; }How do you remove the entire page/post section?
Hi Chris,
You can remove all actions hooked on the following hooks :
– ‘__before_loop’
– ‘__loop’
– ‘__before_article’
– ‘__after_article’
– ‘__after_loop’
More about remove_all_actions() : http://codex.wordpress.org/Function_Reference/remove_all_actions
Best
Wow! Sorry mod for all the postings – Maybe you can make one good one for me!
*/ .safari article.page .format-icon:before, .chrome article.page .format-icon:before { opacity: 1; content: url(PLACE THE PHP HERE); } */Don’t forget to initiate the PHP with
Thanks for sharing Ryan.
Another possible alternative would also be to add this stylesheet dynamically with the wp_head action hook.
Thanks for your contribution.
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?
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)
.safari article.page .format-icon:before, .chrome article.page .format-icon:before { opacity: 1; content: url(ENTER THE PHP FROM BELOW HERE - DONT FORGET TAGS ); }I hope this comes out okay in the post and is of some use to you 🙂
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 🙁
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!
.safari article.page .format-icon:before, .chrome article.page .format-icon:before { opacity: 1; content: url();
}
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 ) ) ?>);
}
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.
.safari article.page .format-icon:before, .chrome article.page .format-icon:before { opacity: 1; content: url(ID ) ) ?>); }Took me a while to find out how to use the featured image so hope this helps someone else out stuck in same position!
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!
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!
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
Hi Alex
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.
I’ve figured out how to change icons on a per category basis. You can use CSS and use the font type approach or replace with your own images…
Here’s the thread on the forums:
http://wordpress.org/support/topic/customizing-icons-for-each-category
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.
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.
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!
Here is how to replace the icon with your own image, for anyone who is wondering
.post h1.format-icon:before, .post h2.format-icon:before { content: url(wp-content/uploads/2014/02/feather.jpg); }upload your icon to your media and edit: wp-content/uploads/2014/02/feather.jpg
with your own media file!
Spot on Michael. Thanks and I’ve updated the Snippet.
Hey Dave, I really appreciate everything you do, the snippets are brilliant, thank you so much for all the hard work!
Hello!
Thank you, but I have problems with that. It didn’t change..
Can you help me?
thank you!
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!
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!
Hi Sam, your question is not silly you are right to ask! 🙂
As mentionned in the first blue box in the snippet above, the code can be pasted in the Custom CSS or in the stylesheet (style.css) of the theme. If you are new to Customizr, you might want to check this starting guide on how to customize Customizr : http://www.presscustomizr.com/customizr/how-to-customize-customizr-wordpress-theme/
Hope this will help and enjoy the theme!
Hi,
The code to Remove Post Icon/Title is not working to me (yes to Remove Page Icon/Title).
Help.
Thank you.
Sergio, 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.
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!
Hi Ivan, you can easily change your post title tag with this snippet : http://www.presscustomizr.com/snippet/change-the-post-title-tag-to-h2/
Cheers
Thanks, Dave. I’ve just tried it but it doesn’t work…
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.
Hi Dave,
the snippet works well! Thanks! Is it possible to remove the line underneath the title also?
Julia
To remove the first line, use:
.featurette-divider.__before_loop { display: none; }I need this solution as well, please post as soon as you can. Happy Holidays!
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 🙂
Can you leave a link to your page, or send me an email and I’ll give you a fix.
Thanks
After a similar request, I’ve created and submitted a new Snippet. Should be available in next couple of days, will publish link here.
I’ve managed to remove the icon on the Category page by using the following snippet
/* Remove Archive Icon */ .archive #main-wrapper h1.format-icon:before { content: none; }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.
Hi LenaLuna you can achieve that putting the following code in your child-theme functions.php:
add_filter('tc_category_archive_title', '__return_empty_string');thanx Dave for your advice (see below)
thanx Rocco, too for another option to do it.
http://www.presscustomizr.com/snippet/changing-the-title-of-the-categories-archive-pages/
Then change line #3 as below:
add_filter('tc_category_archive_title' , 'my_cat_title'); function my_cat_title($title) { return ; }Hello!
How can I set a different Page Tittle Icon for every page I have in the site?
Thanks a lot.
Amazing job!
New code added above. Thanks for the inspiration!
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?
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.
Hello, the code removing the icon is not working anymore for me 🙁 Do you have a solution?
Sorry it was just a mistake in my CSS
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!
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
.page #main-wrapper h1.format-icon:before { content: '\E722'; }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
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
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.
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?
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.
can you post what you done ? because same here not working with removing pencil.
That was it, Dave. Problem solved!
Many 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.
Pablo
Thanks for that superior bit of testing by you & +1 above, I think it’s now fixed!
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