Custom Body Class style not being applied

[willb]

I've created a custom body class using this code snippet:

//* Add custom body class to the head
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $books ) {
$books[] = 'custom-class';
	return $books;
}

I've written the following CSS:

.books {
	border-bottom: 2px dotted #BDD3DB;
	padding: 20px;
	margin-bottom: 20px;
	line-height: 1.00em;
}

With this HTML on a dev site it works (though this does not work on the intended site):

<div class="books">
some stuff here
and more
more 
more stuff
</div>

<div class="books">
a second class of books
which has only two lines</div>

<div class="books">
a third type of stuff
this one with lots of lines
line
line
line
</div>

With this on the intended site it does not:

<div class="books">
<h3><a href="http://www.amazon.com/gp/product/0345434773/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0345434773&linkCode=as2&tag=themodemrsdar-20&linkId=HNA3TTCQHRTBQZRB" target="_blank">Evensong</a><img style="border: none !important; margin: 0px !important;" alt="" src="http://ir-na.amazon-adsystem.com/e/ir?t=themodemrsdar-20&l=as2&o=1&a=0345434773" width="1" height="1" border="0" /></h3>
<em>by Gail Godwin</em><img style="border: none !important; margin: 0px !important;" alt="" src="http://ir-na.amazon-adsystem.com/e/ir?t=themodemrsdar-20&l=as2&o=1&a=0345434773" width="1" height="1" border="0" />

<a href="http://www.amazon.com/gp/product/0345434773/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0345434773&linkCode=as2&tag=themodemrsdar-20&linkId=472MW3O7RUZLWH3W" target="_blank"><img class="alignleft  wp-image-18910" alt="Evensong" src="http://modernmrsdarcy.com/wp-content/uploads/2014/05/Evensong-192x300.jpg" width="150" height="225" /></a>Bacon ipsum dolor sit amet brisket short loin ball tip meatloaf fatback tongue swine. Shoulder pork loin tail, ribeye meatloaf bacon turkey flank bresaola turducken. Filet mignon biltong beef pork chop shoulder. Salami prosciutto ground round fatback swine sausage biltong.

</div>

The page is not published yet. But any guesses as to why the simple HTML works on one site and not on another? Is the CSS just not specific enough? Should I add .entry-content .books or something along those lines?

http://modernmrsdarcy.com

[Lauren @ OnceCoupled]

The class you're adding is custom-class, not books.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[willb]

Thanks for the reply Lauren-

so you're saying I should change the line

$books[] = 'custom-class';

to

$books[] = 'books';

That doesn't seem to change anything and still leaves me wondering why the exact same code would work in the dev environment, but not on the production site.

Do you have an explanation as to what I've done wrong? Trying to learn as well as fix my problem 🙂

[Lauren @ OnceCoupled]

Well now it allows you to see (when using the browser inspector) that clicking on the body tag shows no .books styles being applied to it. That means the line in your code isn't being read. When I went into your CSS and grabbed that block of code, and copied it into the top of your file, is appears. This means your file is likely missing a closing bracket, keeping later code from being read.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[willb]

Lauren I still cannot find the unclosed bracket or a comment that doesn't end, but it's working.

Thanks for your help.

[Lauren @ OnceCoupled]

You are missing multiple closing brackets: lines 1532 and 1641. If you close those and move your block of code back to the bottom, you should see it working still.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts