It started from a now-on-hiatus online magazine project. I needed a way to style individual posts, but at the same time have the ability to reuse the same stylesheet again on multiple posts (and taxonomies). I also wanted a more 'proper' editor to edit the CSS. There were plugins such as Art Direction and WordPress.com Custom CSS, but each one had its own drawbacks.<\/p>\n
Looking around the web for inspiration, I stumbled upon [Jason Santa Maria](http:\/\/jasonsantamaria.com\/)'s use of a concept called 'design tags'. Posts were sorted into such tags, and each design tag would represent its set of styles. This sounded like a good concept, so I sought to recreate it.<\/p>\n
Voila, I present you Design Tags, a WordPress plugin that does just that.<\/p>\n
= How it works =<\/p>\n
Design Tags utilizes the new Post Type and Taxonomy APIs available in WordPress 3.0, so at least WordPress 3.0 is required to install the plugin.<\/p>\n
This plugin registers one new post type called Stylesheet ( Admin panels for stylesheets and design tags are on the administration screen just like regular posts and pages.<\/p>\n = Customized CSS Editor and Media Insertion =<\/p>\n Besides the neat semantics described above, Design Tags also includes a customized editor for your CSS. It may look like the usual post editor -- it's supposed to, but look again. The post editor for *Stylesheets* is modified through jQuery. The visual editor is disabled and the HTML editor neatly renamed CSS. The editing toolbar has been replaced with a new toolbar that lets you change the font and font size of the editor. You can also toggle word wrapping and insert CSS But not only that - you can even upload and insert files! This is extremely useful if you wish to upload background images, dt_stylesheet<\/code>) and one new taxonomy called Design Tag (designtag<\/code>). Stylesheets are linked to design tags. So are regular posts. Posts are then assigned stylesheets according to each of its design tags. For example, if there was a stylesheet called 'Style1' tagged 'DT1', and post 'Post1' was also tagged 'DT1', then the permalink page for 'Post1' will link to the stylesheet 'Style1'.<\/p>\nurl()<\/code> references (kind of like the equivalent for links, right?). You can still resize the box like you would in the normal post editor.<\/p>\n@font-face<\/code> fonts, just static CSS files or even link to external CSS files. The media window works like it normally does - you choose a file, maybe a size for images, and click 'Insert to post'. But it doesn't output any HTML tag, just url()<\/code> references with the URL of the file. If you selected a CSS file, it even outputs an @import<\/code> statement to go along.\n<\/p>","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/58578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=58578"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/phrostypoison"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=58578"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=58578"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=58578"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=58578"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=58578"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=58578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}