Launch Academy has started hosting Girl Develop It Boston’s monthly Code & Coffees, which I’m beyond thrilled about. Girl Develop It is an awesome non-profit organization that provides affordable meet-ups, courses, and community support for women learning how to code. They have branches all around the country! I took their Introduction to JavaScript course before I took the plunge and attended Launch’s immersive program.
The Code & Coffees often kick off with “lightning talks,” or short 10-minute presentations about working in tech. At July’s Code & Coffee, I gave a talk on how web developers with non-technical backgrounds can bring value to an engineering team. (This article summarizes that presentation nicely). At September’s event, I offered some tips & tricks for working in a familiar, approachable content management system (CMS) for those new to web dev: WordPress.
These days, as a developer and instructor at Launch, I do most of my work in Ruby on Rails. However, when I first began dabbling in web dev, I started with WordPress. Working in its CMS gave me a safe environment in which to put my growing HTML and CSS skills to use.
2 years ago, my first-ever freelance project involved maintaining the WordPress site for Boston Comedy Chicks, which organizes a monthly showcase of female comedians in Boston. While I didn’t implement any of the site design, I got to learn about the inner workings of WordPress, update page information, play around with WordPress plugins, and attend comedy shows for free, which was pretty sweet.
For a more recent project, actually finished up about a month ago, I was asked to revamp a WordPress site for the Graduate Women at MIT (GWAMIT). They weren’t happy with the way their menu looked, wanted to remove their blog posts from the front page, and just overall give their site a brand new, modern look.
I was able to do this with just plain old HTML and CSS. I built the design from a basic template, adding in some CSS3 animation and heavily customized features. In exchange, GWAMIT very generously took me out to dinner at Flour Bakery and gave me an amazing tote bag, plus some monetary compensation.
During my presentation, I covered the following topics:
What is HTML and CSS?
I can’t take credit for this analogy, but I think it’s a great way to explain what HTML and CSS do: Think of HTML as the bare-bones frame of a house. It’s all the different floors, the roof, the spaces for the windows and doors. But it’s unembellished.
If you looked at HTML on a webpage, it would look like this.
CSS provides all the embellishments on your HTML house: Lights, hanging plants, patterned wallpaper, shutters, marble tile, you name it.
On a webpage, HTML and CSS together gives you a huge step up in design.
Using the Chrome Inspector
When you start building your site, you can begin with an entirely bare-bones WordPress theme, like Twenty Fifteen. It’s pretty plain right out of the box, but it does come with some default styling, which you can change with CSS.
If you’re new to CSS, though, writing it to customize your theme and anticipating your page going live can seem pretty intimidating. It always helps to play around with it a little first before it goes live. And luckily, you can do that…with the Chrome inspector!
The Chrome inspector, for those who are unfamiliar, is part of a set of web developer tools provided to you by the Chrome browser. It allows to dig deeply into the innards of your code and see the skeleton of the HTML and all the fancy styling provided by the CSS. And, the best part is, it allows you to temporarily change things without touching the actual site, so you can try out your styling before you plug it into your work.
With the Chrome inspector, for instance, I was able to take a peek at the HTML and CSS for the Girl Develop It page on Meetup.com. Here’s how the original page looks:
With a few lines of code in my Chrome inspector, without actually making any permanent changes to the live page, I was able to change the header so it looked like this! Who doesn’t love Snoopy?
To get started, download Chrome here. And to work with the Chrome inspector, you can do either of the following:
- Select the Chrome menu at the top-right of your browser window. Select Tools, then Developer Tools.
- Right-click on the webpage and select “Inspect Element.”
Customizing WordPress
Let’s say we’ve tried out our changes in the Chrome browser and like what we see. How do we go from playing around in our browser to making the changes permanent on our WordPress site?
If we look at our file structure in the WordPress CMS, we’ll see something called style.css, which is the stylesheet for our theme.
We could put our styling here, but there’s a catch! Sadly, a WordPress upgrade will wipe out all the custom CSS we added to the style.css file.
Here are some much better options:
- Create a child theme (generally considered best practice)
- Use a custom CSS plugin (like I did)
- Recommended plugin: WP Add Custom CSS
It’s generally recommended to create a child theme, which inherits the functionality and styling of the original theme you chose to work with, but also includes your custom styling. When you update your WordPress site, the parent theme is what gets changed, so your changes on the child theme won’t be affected, which is cool.
You can also use a plugin to help you add — and protect — your custom CSS on the site. What’s a plugin? It’s a handy little package of code, written in the PHP programming language by some other developer, which you then insert into your WordPress site.
There are many different kinds of plugins you can use on your site, from calendar plugins, which give your site an events calendar right out of the box, to team page plugins that allow you to attractively display the names and photos of people working at a particular company or organization.
To customize the GWAMIT site, I used the “WP Add Custom CSS” plugin to build on the default styling of the TwentyFifteen theme. This plugin is great because it allows you to add custom CSS for the whole site at once, as well as for individual pages and even blog posts.
Pick the Best Plug-In for the Job
While we’re on the subject of plugins…
There are a ton of WordPress plugins out there, and they’re all created by different developers. When I search for a Calendar plugin in the directory, I get 681 results. And some of them are much better than others. So how do you pick out the gems from the bad eggs?
This may seem a little shallow, but on Wednesdays, does it wear pink? Is it popular? Well-liked? Widely used? If not, that’s probably a bad sign, kind of like when you go into a restaurant at 6 PM on a Saturday night and you’re the only one there.
Read the fine print. Don’t just skim the plugin description. Does the description make it clear how it’s used? Is the FAQ well documented? Also, check out the ratings and reviews. What information can you glean from those?
Finally, stalk the support forums for the plugin. Are there a lot of support requests or questions that haven’t been responded to or resolved? If so, move on. When was the last update to the plugin made? If it was fairly recent, say, in the past month, that’s good news.
Enjoy WordPress, and leave me a comment if you have any questions or if there’s anything I missed!
lilydbarrett.com 