{"id":4064,"date":"2015-06-17T11:11:00","date_gmt":"2015-06-17T15:11:00","guid":{"rendered":"http:\/\/irreal.org\/blog\/?p=4064"},"modified":"2015-06-17T11:11:07","modified_gmt":"2015-06-17T15:11:07","slug":"adding-custom-css-to-a-wordpress-site","status":"publish","type":"post","link":"https:\/\/irreal.org\/blog\/?p=4064","title":{"rendered":"Adding Custom CSS to a WordPress Site"},"content":{"rendered":"

When I first started blogging with WordPress, I needed some custom CSS. Being a WordPress n00b, I simply added it to the theme’s CSS file that controls what the site looks like. Of course, that bad decision came back to bite me in the butt and I moved to using a child theme to separate my custom CSS from the theme’s<\/a>. <\/p>\n

Timo Geusch over at The Lone C++ Coder’s Blog<\/a> has another way of adding CSS to your site<\/a>. His method requires the jetpack<\/a> plugin but is easy to use once you have jetpack installed. Geusch says that he thinks adding a child theme is too heavy duty for what he wanted to do but I didn’t find it any more complicated that what he did. For example, here is my entire child theme <\/p>\n

\n
\/*<\/span>\n Theme Name:   Twenty Ten Child<\/span>\n Theme URI:    http:\/\/irreal.org\/twentyten-child\/<\/span>\n Description:  Twentyten Child Theme<\/span>\n Author:       jcs<\/span>\n Author URI:   http:\/\/irreal.org<\/span>\n Template:     twentyten<\/span>\n Version:      1.0.0<\/span>\n Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready<\/span>\n Text Domain:  twentyten-child<\/span>\n*\/<\/span>\n\n@import<\/span> url(<\/span>\"..\/twentyten\/style.css\"<\/span>);<\/span>\n\n\/* <\/span>=Theme customization starts here<\/span>\n-------------------------------------------------------------- <\/span>*\/<\/span>\npre <\/span>{\n        font-family<\/span>: \"Courier 10 Pitch\"<\/span>, Courier, monospace;\n        border<\/span>: 1pt solid black;\n        padding<\/span>: 3pt;\n        background-color<\/span>: #F0F8FF;\n        overflow<\/span>: auto;\n}\n.key, kbd <\/span>{\n        border<\/span>:solid 1px #989898;\n        border-radius<\/span>: 3px;\n        background-color<\/span>: #F4F4F4;\n        padding-left<\/span>: .25ex;\n        padding-right<\/span>: .25ex;\n        font-family<\/span>: monospace;\n}\n.footpara:nth-child(2) { display<\/span>: inline; }\n.footpara <\/span>{ display<\/span>: block; }\n.footdef  <\/span>{ margin-bottom<\/span>: 1em; }\n#site-title <\/span>{\n        float<\/span>: left;\n        font-size<\/span>: 60px;\n        line-height<\/span>: 36px;\n        margin<\/span>: 0 0 18px 0;\n        width<\/span>: 700px;\n}\n<\/pre>\n<\/div>\n
 Other than the header, it’s just my custom CSS. Exactly like Geusch’s solution. <\/p>\n
 Whatever method you like best, be sure to use one of them if you want to add some custom CSS. Believe me, you don’t want the pain that messing with the theme’s CSS will bring you. <\/p>\n","protected":false},"excerpt":{"rendered":"
When I first started blogging with WordPress, I needed some custom CSS. Being a WordPress n00b, I simply added it to the theme’s CSS file that controls what the site looks like. Of course, that bad decision came back to … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[18,4,119],"class_list":["post-4064","post","type-post","status-publish","format-standard","hentry","category-general","tag-emacs","tag-org-mode","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4064"}],"version-history":[{"count":1,"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4064\/revisions"}],"predecessor-version":[{"id":4065,"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4064\/revisions\/4065"}],"wp:attachment":[{"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irreal.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}