How to do Drop Caps in a Genesis child theme

[baggi-t]

I'm working on a Genesis child theme and by using the selector: .entry-content > p:first-child:first-letter I'm able to set the first character in each post and excerpt to be a drop cap. However, if there is a photo in the post with its html appear in the entry-content div before the the p:first-child, I lose the drop cap. How do I modify my selector to target the p:first-child after the img+caption html?

Many thanks
Tim

http://timbaggaley.com

[Victor Font]

Instead of trying to calculate the first paragraph, why not just add a class to the first paragraph. Using the WordPress editor's text tab, include class="drop-cap" to the paragraph tag. This is the way Gutenberg does it:

HTML:
<p class="has-drop-cap">

CSS:

p.has-drop-cap:first-letter {
 float:left;
 font-size:4.1em;
 line-height:.7;
 font-family:serif;
 font-weight:600;
 margin:.07em .23em 0 0;
 text-transform:uppercase;
 font-style:normal
}
p.has-drop-cap:not(:focus) {
 overflow:hidden
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[baggi-t]

Sorry, can't get this to work. I've added the class to to the first para using php in my functions.php.

// Add class to first para
 function first_paragraph($content){
	return preg_replace('/<p([^>]+)?>/', '<p$1 class="dropcap">', $content, 1);
}
add_filter('the_content', 'first_paragraph');

Which works fine but is still thwarted if the first p has the html for an img ahead of it. How do I get my first p styling to apply after the img html?

[Victor Font]

I don't understand why you want to use PHP to add a class. That's really a circuitous way to do it. Edit the HTML directly.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts