{"id":2062,"date":"2020-03-28T23:47:28","date_gmt":"2020-03-29T03:47:28","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=2062"},"modified":"2020-03-28T23:47:28","modified_gmt":"2020-03-29T03:47:28","slug":"customizing-wordpress-css","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/customizing-wordpress-css\/","title":{"rendered":"Customizing WordPress CSS"},"content":{"rendered":"\n
\"Waterfall
Photo by Simon Matzinger<\/a><\/figcaption><\/figure>\n\n\n\n

Customizing CSS in WordPress can seem a bit intimidating or confounding, but once you get the hang of it, it’s actually relatively simple and incredibly powerful.<\/p>\n\n\n\n

Where to customize CSS in WordPress<\/h2>\n\n\n\n

Reading: Beginner\u2019s Guide: How to Use CSS in WordPress for Easy Style Tweaks<\/a> by John Hughes<\/code><\/p>\n\n\n\n

The above reading walks through the basics of the primary way1<\/a> to customize CSS in WordPress.<\/p>\n\n\n\n

In short, from the WordPress dashboard, you’ll visit Appearance > Customize and then choose “Additional CSS.” The article contains good screenshots and examples, but I’ll add here that a great way to think about the “Additional CSS” box is like the notion of a custom.css in Bootstrap<\/a>. The styles you write here are applied last and therefore override any other styles from your theme. As always, DevTools \/ the inspector<\/a> are your best friends, so take the time to get to know them well.<\/p>\n\n\n\n

This support article for WordPress.com<\/a>2<\/a> adds a few good additional details.<\/p>\n\n\n\n

Targeting Specific Pages<\/h2>\n\n\n\n

Reading: WordPress: Customize the CSS for specific pages or posts<\/a> by Rick D'Haene<\/code><\/p>\n\n\n\n

What we’ve covered so far will help you style all<\/em> your pages, but what if you want to apply styles to just one single page? It’s not at all obvious at first, but WordPress actually provides a surprisingly simple method for doing so.<\/p>\n\n\n\n

As the above reading details, WordPress generates a specific CSS class for each individual page and post. With a little practice and careful thinking, you’ll be able to customize your WordPress site to your heart’s content.<\/p>\n\n\n\n

Adding a Google Font to your Additional CSS <\/h2>\n\n\n\n

While there are several plugins that help you add fonts of your website, it’s surprisingly simple to add a Google Font (or two!) to your WordPress site using just additional CSS. <\/p>\n\n\n\n

To get started, navigate to Google Fonts<\/a> and find the font you’d like to use on your WordPress site. Click “select this font” and then “Embed” under Selected Family, and then @import. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You don’t want the <link><\/code> for your WordPress site: think about that for a minute and see if you can mentally explain why we won’t use that.3<\/a>. <\/p>\n\n\n\n

Next, you are going to copy the @import url<\/code> from between the two <style><\/code> tags. Again, think for a minute about why we don’t want those two <style><\/code> tags in our CSS document.4<\/a> Paste that @import URL<\/code> at the top<\/strong> of the Additional CSS area of your WordPress site. Then, copy the CSS rule from Google Fonts and apply it to whatever element your are trying to style. See below for an example of how it should look! <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n

  1. As with just about everything in WordPress, there are a thousand different ways you could<\/em> do this, but this method should be all most people need.↩<\/a><\/p><\/li>

  2. One of the many benefits of learning the stuff we cover in this class is that things you’re charged for at WordPress.com are free with self-hosted WordPress!↩<\/a><\/p><\/li>

  3. The Additional CSS area on WordPress reads CSS, not HTML. The <link><\/code> is an HTML element, so it won’t work in our CSS.↩<\/a><\/p><\/li>

  4. Yup, that’s right: <style><\/code> is an HTML element that we use when creating an internal stylesheet. Since the Additional CSS input area reads CSS and not HTML we do not want to include them.↩<\/a><\/p><\/li><\/ol><\/div>","protected":false},"excerpt":{"rendered":"

    Customizing CSS in WordPress can seem a bit intimidating or confounding, but once you get the hang of it, it’s actually relatively simple and incredibly powerful. Where to customize CSS in WordPress Reading: Beginner\u2019s Guide: How to Use CSS in WordPress for Easy Style Tweaks by John Hughes The above reading walks through the basics […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2062","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/2062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=2062"}],"version-history":[{"count":0,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/2062\/revisions"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=2062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}