{"id":67807,"date":"2011-12-27T09:34:43","date_gmt":"2011-12-27T14:34:43","guid":{"rendered":"http:\/\/wpmu.org\/?p=67807"},"modified":"2011-12-27T09:34:03","modified_gmt":"2011-12-27T14:34:03","slug":"easily-style-wordpress-posts-according-to-tag","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/easily-style-wordpress-posts-according-to-tag\/","title":{"rendered":"Easily Style WordPress Posts According to Tag"},"content":{"rendered":"

\"Post<\/a>
\nWe talked before about styling a sticky post<\/a> with CSS to make it stand out. We also talked about giving categories their own icons<\/a>.<\/p>\n

However, in both of those situations, you are tied to either making the post a sticky or having it in a certain category in order to make it stand out.<\/p>\n

But what if you had non-sticky posts in various categories that you wanted to stand out?<\/p>\n

The solution is to add a special tag to the post<\/strong>, and then style all posts with that tag<\/strong>.<\/p>\n


\nAn Example<\/strong><\/h2>\n

Let\u2019s say we want to style all posts with the tag \u201cspecial\u201d a certain way. We would simply add the tag \u201cspecial\u201d to our post in the same way we normally add a tag to a post.<\/p>\n

\"Post<\/a><\/p>\n

And then we would add our styling for that tag to our CSS stylesheet.<\/p>\n

>><\/strong> In your Admin area, go to Appearance > Editor<\/p>\n

>><\/strong> This should take you to the Stylesheet (style.css) for your theme.<\/p>\n

(If you have a custom.css stylesheet, then you\u2019ll want to use that. A custom stylesheet allows you to add styles that won\u2019t be overwritten if the theme is updated.)<\/em><\/p>\n

>><\/strong> At the bottom of your stylesheet, add the styling you would like for your tag. Here\u2019s an example:<\/p>\n

.tag-special {background: #A2D9FD; border: 3px solid black; padding: 10px;}<\/pre>\n
This will add a light blue background and a border to the post wherever it appears on your site \u2013 this includes on your front page, your archive pages, and on the single page of the blog post itself.<\/p>\n

\nPost with \u201cSpecial\u201d Tag on Front Page<\/strong><\/p>\n
\"Post<\/a><\/p>\n
Post with \u201cSpecial\u201d Tag on Single Post Page<\/strong><\/p>\n
\"Post<\/a><\/strong><\/p>\n
Other Uses and Possibilities<\/strong><\/h2>\n
Of course you can add as many different tags with as different types of styles as you like. You can also use background images as we did when we gave categories their own icons<\/a>.<\/p>\n
To use a background image, you would use styling such as this in your CSS stylesheet.<\/p>\n
.tag-special {\r\nbackground: url(http:\/\/example.com\/wp-content\/uploads\/musicman60.jpg) no-repeat top right;\r\n}<\/pre>\n
The result would look like this:<\/p>\n
\"Post<\/a><\/p>\n
More Flexibility<\/strong><\/h2>\n
In some cases, of course, styling a whole category may be just what you need. But if you need more flexibility in order style posts across various categories, then styling by tag could be just what you\u2019re looking for.<\/p>\n
Photo: Red Tag<\/a> from BigStock<\/p>\n","protected":false},"excerpt":{"rendered":"
Make selected posts stand out by adding a special tag. <\/p>\n","protected":false},"author":84404,"featured_media":67809,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[1044,45],"tutorials_categories":[],"class_list":["post-67807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-css","tag-tags"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/67807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=67807"}],"version-history":[{"count":2,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/67807\/revisions"}],"predecessor-version":[{"id":198039,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/67807\/revisions\/198039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/67809"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=67807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=67807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=67807"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=67807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}