Using Javascript to fix Wordpress annoyances in a wordpress-y way

This post was originally titled: "Give up on platforms, not users: or why Javascript gives me hope"

Photo by Jimmy Jin on Unsplash

Wordpress: Whoas & Woes

I started my professional journey in the tech world as a content manager for a Wordpress site. This gave me lots of opportunities to see how fragile and cumbersome Wordpress can be. But, way back in 2009 in a pre-Squarespace world it was a good way for a Liberal Arts kid without a ton of code skills to put together a decent looking website with lots of functionality.

Ever since I started to learn about Wordpress, especially its quirks and frustrations, I've been wanting a more stable solution for myself and my clients. But, as we all know change takes time.

As I headed into the final four weeks of the Flatiron School Software Engineering Bootcamp I was contacted by a long time client for some adjustments and additions to her Wordpress site.

The client is a journalist, we update content every few weeks, depending on her work load. The site is simple, based on a commercial theme, and rather minimal. As such, it doesn't allow for multiple authors to be listed on one post; and modifying the theme files (even child themes) always leads to update issues.

Well, back in February she co-wrote a Washington Post article which required we place four authors on the by-line.

During my time at Flatiron my minimal amount of client work occurs on weekends, preferably Saturday morning over coffee. Which means, about the last thing I want to do is build a new Wordpress theme feature.

Annoyance.

Frustration.

Desire to tear the beating heart out of the Wordpress core.

Vanilla Javascript to the rescue

I finished my coffee while uploading new stories, and it occurred to me: I made this site, so I can break it!

I made this site, so I can break it

In truth, I realized that nothing is sacred and sometimes a job done is better than a job done perfectly. With this new found freedom I opted to combine a very Wordpress-y solution, with a Javscript solution.

Wordpress Plugins are the worst

In spite of this ^ being true, they are still an important part of the Wordpress ecosystem. I opted for one that would let me just inject custom Javscript or CSS into the footer. Since this client is on a GoDaddy shared hosting (I know, I know...) it's a royal pain to edit theme files safely in production. Thus, a plugin.

Simple Custom CSS/JS is a pretty simple plugin, and it offers an easy way to just inject JS into the footer or header.

Okay, so now that we've got a tiny window into mucking about with the theme how can we add 4 author names instead of just one?

As simple as .append and .prepend

In order to make our adjustment we needed to first find the place where it should be injected. The top-matter where the Author attribution in our post looks like this:

<aside class="post-author">
  <em>by</em>
  <span itemprop="author">
    <a href="/author-bio" title="Posts by Author">
      Author Name
    </a>
  </span>
</aside>

That <span> sure looks like a good element for us to target! What if we target .post-author span ? that should get us to the right spot, then we can add in some new elements dynamically.

So, if our Javascript looks like this:

const authorSpan = document.querySelector(".post-author span")
const newspan = document.createElement("span")
authorSpan.prepend(newspan)

That connects us to the element in the HTML, and then creates a new span, and appends that span next to our author text. Now, we just need to set the text of the span we created to the text we want.

const authorSpan = document.querySelector(".post-author span")
const newspan = document.createElement("span")
authorSpan.prepend(newspan)
newspan.innerText = " Awesome Author, Rad Reader, Sweet Signature"

Stick that into the plugin, and boom! You are pretty much all set! Well, except for the fact that it'll do that to every single post!

Notice that the plugin just injects site-wide. Hmm, if only there was a way for us to target just just that post, and just that span.

Thank goodness for Wordpress permalinks

Yeah, the permalink setup can be a pain at times - but it's helpful in this case!

if (window.location.pathname === "/2022/02/20/post-name") {
const authorSpan = document.querySelector(".post-author span")
const newspan = document.createElement("span")
authorSpan.prepend(newspan)
newspan.innerText = " Awesome Author, Rad Reader, Sweet Signature"
}

Much better - a tiny bit of conditional rendering based on the URL. Now, after GoDaddy finally clears our cache we can see that the site is cleared of extra authors, and the post we wanted to touch up is looking smart!

Conclusion

Wordpress stinks, if you're here you know that. But, it's been around for a long time and was an entry way for many of us! Thankfully, even just a little code knowledge can make a huge difference in the development process.

my code coda
1) Thanks for reading, if I got something wrong let me know!

2) There are always things to improve - what could we do better here?