A little page-specific CSS

The first page I added to this site is my current resume.

The static resume page I prepared before my WordPress experiment used floating elements, responsive CSS and separate print style rules to:

  1. present a multi-column layout, centered, for wide displays;
  2. collapse to a single column for narrow displays;
  3. produce a 2-page, letter-sized printout and/or PDF.

Now the same html is embedded in a WordPress page, using only the theme’s CSS. (Although not exactly the same html at first, because the editor likes to insert <p> tags at line breaks.) Not as good.

So my very next project was to reproduce my original resume screen and print layouts by including some page-specific CSS within this theme.

There are several ways to do this. I’ve listed some I considered.

The first two options on the list have the advantage that the custom CSS won’t be lost in a theme update. But I’m not worried about that – the theme I’m using now is just a placeholder for a custom theme – so they’re included FYI.

The last two options are just CSS – no PHP or WordPress functions. And the last one is the simplest – the one I selected for this project.

  1. Create a child theme including a separate style sheet to be loaded with wp_enqueue_style.
  2. Use wp_enqueue_style alone to load a style sheet from outside the theme, without a child theme.
  3. Include the custom css within the theme directory, but in a separate css/custom.css file, and call it separately after the main css file for the theme by adding it to header.php:
    <link rel="stylesheet" href="<?php bloginfo('template_directory');?>css/custom.css" type="text/css" />
    Wrap that with if ( is_page_template('resume.php') ) to load the custom css for the resume page, only.
  4. Within the theme’s default style sheet, use @import url('css/custom.css'); in the default to include the custom css file within the theme’s style sheet. But @import must be the first rule in any style sheet. And in this case, that’s kind of a pain, because most of the theme’s default styles are fine – I just want to modify them for a few elements and for printing. Which means I really want to include the custom rules after the default rules, not before. (Or, with @import, mark everything important.)
  5. As I did, append the custom CSS rules to the end of the default theme style sheet.

Many of my 17 custom CSS rules refer to content-specific classes unique to my Resume page. The remainder are @media print rules, some designed to hide common page elements I don’t want printed with my Resume, and mostly limited in scope to the body.page-id-X class for the Resume page.

Appending these 17 custom CSS rules appeared to me to be the simplest way to insure that they take precedence over any other applicable rules in the roughly 2000 lines in the theme’s default style sheet, or any updates. And in the case of an update, it would be relatively simple to paste the 17 rules back onto the end of an updated style.css.

Any much more extensive effort to customize a complex theme would certainly justify a child theme, but for a simple portfolio site like this, I’d be more likely to start over with a custom theme.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>