Revisiting a WordPress Website (or “We Need HTML, Pt 2”)

This is where you can find it.

I received a scathing comment about the Kiwanis website I linked in a CodeX post, and that comment should probably not be discussed ad nauseam…I believe I have written no fewer than five separate blog posts in response to it, mostly just about community guidelines, constructive criticism, and that sort of thing. I even heard two separate people recount their experiences with this guy, where they said that though they think his views of frontend frameworks are misguided, and that he is rude, he still provides a lot of insight and has extremely impressive knowledge of HTML/CSS. This is WordPress, though. He also hates WordPress, and many people would justifiably say that developing a WordPress website from a template like I had is not really web development.

Why, then, is the website not perfect? Either it is because the template is not good, or because I am not properly using the template.

His criticisms:

  • Not accessible
  • Unnecessary markup generation; endless divs, unnecessary classes, all for very little purpose
  • Not mobile friendly
  • Malformed heading (?)
  • “A stunning example of everything that can go wrong in learning HTML, but after seeing your ode to 1990s practices train wreck I am not surprised you have ‘problems’ learning anything other than HTML”

I brought this up at a FreeCodeCamp discord, and one of the Discord members sent me this in response.

Easy Stuff

Look, I had planned to update this thing once every month and it has not been updated in four months or so. We are due for an update; Kiwanis Club, please pay me more.

I want to fix the Facebook integration. I suspect many of the problems have to do with my habitual tendency to disable Facebook for like six weeks, then re-enable it…did I say weeks? I meant seconds. It occurred to me that we could create a separate Facebook account JUST to manage this page. It would also be an excuse to get back on Facebook.

Wait, did I really just say that? Ugh, and now I have to re-enable the other account to add this one as an admin. Wish me luck.

…..

Okay, mission accomplished. That took…a little longer than I had expected. First, I was only able to add a friend on one of the two accounts. Then after assigning admin privileges to the new account I disabled the main one. Obviously I FIRST had to check in on what everyone has been up to since the last time I had re-enabled Facebook.

Goodbye, Facebook. I will probably see you again fairly soon. By the way, if you want a Facebook to also not be viewable, you can’t just click “I’ll be back” as the reason. Why does Facebook need you to give them a reason? They sound like a toxic boyfriend.

There. This does not look suspicious at all

Huh…I had kind of wanted to post as admin on the Facebook page as a test, but I realized there has been some activity with the Easter Egg Hunt. That is up in the air…cancelled due to rain…but was it postponed? I would not really want to disrupt the Facebook page with the misc thing I was planning to post with month-old photos from Midyear.

Let’s keep going.

Oh, I can’t add this user because he does not have this listed as a page. Turns out he was never added as admin. Turns out someone has to like a page to be an admin. I have no idea why that would be the case, but now we have to send another request. Re-enable. I am glad I am writing about this, otherwise the pure frustration would boil over.

No, actually that is not true. All that was happening was the other account needed to accept the invite…it did not show up as a notification and had to be viewed in pages. Disabled main account again, and…

Adding a new data source
Success!

There! Done! And whew…all this advanced, algorithmic, hackathon coding is making me tired. I think I should probably call it a day.

Icons

They cover this in module 2…you use

<i class=”fa fa-facebook” aria-hidden=”true”></i>

And I don’t really understand why this doesn’t work. It seems to work fine for them.

So again, Facebook

https://www.facebook.com/chkiwanis/

<i class=”fa fa-facebook-square” aria-hidden=”true”></i>Facebook

Linkedin

https://www.linkedin.com/groups/13535276/

<i class=”fab fa-linkedin-in”></i>LinkedIn

OH MY GOD I JUST DELETED THE WRONG MENU. AND I DON’T KNOW HOW TO UNDO IN WORDPRESS. CAN I RETRIEVE AN OLD GIT COMMIT?

Oh…okay, it was there, it just disappeared temporarily because I unchecked main menu. But wouldn’t a backup system be nice? There is a rollback widget that does not do anything, it crashes when you hit “download.” This is not the best system.

You just have to check “main menu.” If you uncheck it, the entire thing seems to disappear

Wait a minute, I know what happened. When you click one of the “menu locations” options for one of its menus, it overwrites the other menus. So if a menu is taken down by your change, the other will automatically get unchecked. I do not personally think this is very intuitive.

Anyway, so I could say “mission accomplished.” We got our icons, but they appear in the bottom right instead of the top left.

Back to the Blog

If the demon was summoned back, I doubt he would be satiated by this post. If anything, he would be even more enraged. His belief is that shortcuts like this are the reason for many of the problems we have. Everything I did just now, in case it was not obvious, was not real web development. The only thing that came close to coding was the HTML, and that is not coding.

Personally, though, I am ecstatic. I had been wanting to fix these two things for a very long time. After the Easter Egg Hunt, I can also start updating Google Calendar again.

By the way, this is a WordPress theme called GivingPress. If I had the technical expertise like that of whoever commented, I might have been able to actually email them back and respond to my criticisms. As it stands, I am not sure why some of these things are the case. I imagine the menu options were updated, so you cannot fit one of those over the other as you had before. Instead, for the icons to fit you have to move the icons to the bottom. It erases the class attribute and the font awesome icons in that case, which is very confusing and seems like a bug.

This is all just speculation, though.

Sometimes the “hard way” to develop is the easier way. Wouldn’t it be nice to roll back in Git, and have a neat commit log? Well, this website has out-of-the-box functionality. People can comment and we can receive these comments (though, now that I think about it, we could have achieved a submission form like this via a static backend), and it also saves these comments in a database. There is a broken backup system, and it has Facebook integration. These are all things that would take a while to do by hand.

But I think the demon would still not be happy. We could have built our own website from the ground up.

Accessibility

He is probably right. These auto-generated <div> tags are not descriptive, and probably make the website non-accessible. I found a couple of links. They could be worth exploring later.

Proper aria usage

HTML Accesibility

If anything, we should probably reach out to the people behind GivingPress. If the template is the reason for non-accessibility, people who serve nonprofits would probably want to fix the issue. That said, they are likely open source volunteers…we really don’t want to be jerks to open source developers.

As for what he had to say about it not being mobile-friendly…come on.

Screenshot from my Android

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Evan SooHoo

Evan SooHoo

A software engineer who writes about software engineering. Shocking, I know.