If you want a real thrill, try making changes to a live WordPress site after a recent deployment and numerous unknown changes by a third party half an hour before marketing needs the updated site for a client meeting…
Yes, this is what has happened to me, not once, but twice in the past two weeks! We find ourselves bereft of a relevant testing environment, in the midst of trying to create local testing environments and a subdomain environment in addition to github. However, before all of those dev environments got set up correctly, we had to debug a few items from the recent re-deployment/migration.
Step One: Change the featured image for a page so Facebook gets it right, and break the site! Okay, the whole site didn’t break, but we suddenly lost the very page we were trying to fix. Lost as in it didn’t display AND we couldn’t find the file on the FTP. Upon trying to move the local version of the file, we found we suddenly didn’t have permissions to change that directory. Enter “Sam”, in charge of recent re-deployment, who enlightened us to the fact that after the deployment, “Owner” of most files and directories had changed to “Apache” from “Our Organization”. After changing the ownership back, we were able to get the file back on the website, the page worked again, AND I figured out how to get Facebook to display the correct thumbnail for the specific page using their “developer” documentation. Actually, some of the better documentation I’ve seen (including you, WordPress).
Step Two: Unable to upload images through the wp-admin screen. Attempted to deactivate and reactivate a few plugins, as recommended in the aforementioned WordPress documentation, and lo and behold half of the styling for the site was lost! Oh my! At this point I literally had to sit down because I had no clue what the problem was or how to fix it. Before restoring a backup of the whole site (I know, I know, stop panicking, Jessica), I fished around the office for some help from other developers not working on this specific site.
After some handy “inspection of element”, we discovered the essential css had been lost. Part of the problem was that we were used to using the Appearance –> Edit CSS part of the Jetpack plugin to easily add and override CSS. Probably not the cleanest or most efficient, but since the site has dozens of style.css files, this seemed like the intuitive choice. Some mysterious element called “Custom CSS” had disappeared from the site quite a while ago, as we saw from a recent download of the site to my computer. So we went back to the now defunct test site, went into Edit CSS, copied the whole file, pasted into the theme’s style.css with a few “!important”s thrown in for good measure, and lo and behold the style came back and two hours later I was exactly where I’d started. I was beginning to feel like the only thing I could accomplish was not making the site worse, and if it was the same at the end of the day as at the beginning of the day, then I was doing well. Sheesh.
Needless to say, these are not the best nor permanent fixes. I would love to be able to test the site back into normal health, but ironically that is proving more difficult than it seems since every attempt as creating a new testing site under a subdomain manages to somehow, you guessed it, break part of the live site.
Things I have learned:
WordPress, I will own you. One day not far from now, I will bend your CSS, PHP, and plugins to my will. Until then, I will tweak, use classes and ids, and read the codex as needed.
If it feels like a hack, and looks like a hack, it probably is. I’m still trying to figure out when not being a hack outweighs getting stuff to work. At this point, I am working on custom styles for one form on the site. Create a short contact form that emails the input to two email addresses. Custom styling and text necessary. Sounds easy enough. I’ve created forms that wrote data to files and databases – this should be an a breeze. And the custom styling will add a nice creative touch, right?
If at first…
The first problem I run into is that the page the form is destined for shares a template with multiple other pages. Therefore, I cannot go in and just add/change ids and classes willy nilly to the html. Oh, no. Plus, the contact form is created in something called “short code” in the Word Press editor, so some sneaky stuff is presumably going on behind the scenes. Why did I bother learning “real” code when I could have just used “short code” the whole time? Yes, that was sarcasm.
I did figure out how to change the “short code” so that it sends to multiple email addresses, so that was a big win there. However, without disabling the CSS for ALL forms on the site, I was still stuck about how to change the CSS on just this one form. Soooo, I used “inspect element” and went rogue.
Going Rogue
So, I go to the form (default styling) and inspect the element, finding that the form for the page has a unique id that is always the same, even when I delete and re-add the form. Interesting. So one possibility is to override all the Jetpack form CSS with custom CSS related to #contact-form-7234. However, that feels weird, jenky, and hack-y to me. Why should this tiny form load fifty million redundant styles?
Next up, let’s bypass the plugin and make our own gosh darn form. That would be impressive and fun. The only issue with adding my own form “by hand” (as opposed to using the plugin’s custom contact form) is that it may no longer be filtered through “askimet” in which case we might open ourselves up to all sorts of naughty spam (no pun intended). Not to mention that I would have to create a whole new template. Better safe than sorry, so we should stick with the “short code” provided by the plugin. However, this means that all classes and ids (and associated CSS) will remain unaltered, which brings us back to square one. This is starting to feel like a lot of work for one teeny tiny four-field form.
Saved By The Troll
So, back to using Jetpack’s form and simply changing the CSS. But this time, change the custom CSS to all .contact-form items. But what about all the other forms on the site? Won’t they get wonky? The good news here is that the other forms are email and comment forms, which are completely different in Word Press World than contact forms. Upon more element inspection, the Jetpack contact form uses something named grunion.css. Whoa. Did the Fremont Troll used to work for Automattic? And write a lot of style sheets? Who else would be named “Grunion”?
By inserting some quick code into functions.php (finally found the right one – under “includes” in the specific theme folder), grunion.css met his untimely demise. There were still some default styles being applied to the form, but I could re-write .contact-form as I saw fit, making for less redundant styling and form styles that are applicable to all the Jetpack contact forms of the future.
And with a quick plugin update, I was able to change the text in the submit button. Viola!
The moral of the story? It’s good to explore your options, but sometimes you just have to take the troll out of the way.
If you are a woman in Seattle, you can’t not learn web development. It is prolific, ubiquitous, pervasive, easy, and inexpensive-to-free. In the past week, for a total of $100 plus bus fare, I have attended:
JS Seattle Meetup’s Free jQuery training held at picturesque Red Fin
Girl Develop It’s HTML5 and CSS3 eight hour course
Seattle Tech Meetup (at least the first hour before intensive day job had me sleep walking back to the bus)
RailsBridge Seattle weekend intensive Ruby on Rails workshop (we made an app!)
Awesome post-workshop happy hour sponsored by BlueBox (they deserve the plug because we got free margaritas)
And I have learned:
But mostly, I have been so inspired by all the awesome people I have met at these events and classes. And I’m not just saying that because I’m trying to get a job writing sappy greeting cards. Meeting other people, especially women, who share my same goals and interests makes me feel so much less adrift in this crazy life and career change. New goal: one day to be a volunteer at these events as a “TA”.
Thank you, Seattle!
Recent Comments