Adam Cap

  • About
  • Mail
  • Archive/Search

Automatically Bold (or Style) the First X Words of Content

↘︎ Jan 18, 2019⇠ | skip ⇢

I first noticed the usage of lede styling on Wired.com, which styling, at least in Wired’s implementation, is where the first three words of a news story are styled differently that the rest of the piece, to attract the wandering eye’s attention. (“Reader: Start here!”) The concept is similar in principle to that of the drop cap, which has been used in print for centuries.

I wanted to apply similar styling to the content on my website, but I didn’t want to go through every post I’ve ever written to add the necessary HTML—a <span> element with an arbitrary class name around the first three (or however many) words of a post. So, instead, I wrote this content filter to do it automatically:

With the markup in place, the text can be styled as so:

It will likely be possible to achieve this targeted styling with CSS alone sometime in the future—through an `::nth-word()`-esque pseudo element, without HTML markup—but for now, this solution affords an immediate response and flexibility.

The number of lede words can be controlled through a custom field—here I use the meta key _lede_words—and I’m partial to solutions like Carbon Fields or CMB2 to assist with the selection. Here’s the corresponding metabox for Carbon Fields that I’ve created:

Note: If any of the lede words are hyperlinked, the above regex will fail. Manually add markup in those odd scenarios, or attempt to amend the code.

Me

circa 2009 (21 y/o)

about adam

Recently…

  • 19 May 4: Prevent iOS + WordPress from Replacing Arrows (and Other HTML Symbols) with Emoji #CSS #HTML
  • 19 Mar 23: Move from Live Production Environment to Local macOS Development Sandbox (MAMP) #command line #WordPress
  • 19 Jan 30: Save Jetpack “Site Stats” Pageviews as Post Meta #JavaScript #PHP #WordPress
  • 19 Jan 26: Use Git to Manage WordPress Projects Developed Locally on macOS #command line #WordPress
  • 19 Jan 18: Fix Line Height for Input Placeholders in Safari #CSS
  • 19 Jan 18: Add Partner/Associates/Tracking ID/Tag to Amazon Links #PHP #regex #WordPress
  • 19 Jan 18: Add Fancybox Attribute to Image Links #PHP #regex #WordPress
  • 19 Jan 18: Automatically Bold (or Style) the First X Words of Content #PHP #regex #WordPress
  • 19 Jan 16: Move from Local macOS Development Sandbox (MAMP) to Live Production Environment #command line #WordPress
  • 19 Jan 15: Add Media/Attachment Source Fields (and Display Image Sources in Content) #PHP #regex #WordPress
  • 19 Jan 7: Remove Nonbreaking Spaces (&nbsp;’s) from Content and Text Widgets #PHP #WordPress
archive

More…
PHP (Language) / regex (Tag) / WordPress (Tag) / code (Post Type)

⇠ Previous
Next code ⇢
  • Home
  • About
  • Archive
  • Mail
  • Random
  • Dingus
  • Reading
  • Code

ADAM CAP is an elastic waistband enthusiast, hammock admirer, and rare dingus collector hailing from Berwyn, Pennsylvania.

My main interests at this time include reading, walking, and learning how to do everything faster.

Psst: If you find my website helpful or enjoyable, please join my newsletter and/or send me an email—I want to hear from you!

Disclosure: As an Amazon Associate I earn from qualifying purchases.

© 2009–2023 Adam Cap(riola) top ⇡