What does thePixelPixie use to build original WordPress themes?

So, it’s been awhile since I posted. Life has been crazy this year, in mostly good and GREAT ways. But I wanted to write a quick little blog here to talk about what I use when I’m building new themes for WordPress sites. This is part “thePixelPixie’s favorite things”, and part “these things make my life as a developer and designer so much easier”!

First of all, all of the original themes I create are built on a framework called Bootstrap. This framework (it’s not a theme all by itself, and was not created for any one platform) was created under the premise that most websites today are viewed most often in mobile layouts – from phones and tablets – THEN on laptops and desktops. It’s concept is “mobile first”. In the early days of websites being accessible by mobile devices, developers/designers would need to create completely different layouts and redirect browsers to the proper version of the content. So, for instance, a website might have a sub-domain of mobile.mydomain.com. If you were visiting the site from your desktop or laptop computer, you’d wind up just at mydomain.com. But if you were viewing from your phone, you would either need to click a link to go to the mobile-friendly version, or the coding would be able to recognize that you were visiting from a browser for mobile devices and would automatically forward you to mobile.mydomain.com. Today, however, you can design websites to simply “rearrange” their content depending on the width of the browser and/or monitor being used to view the site. No more double-coding. No more sub-domains. In most ways, it’s way way WAY easier to build for mobile now. In fact, as the developers at Bootstrap would say, everything should be designed FIRST from the mobile perspective, and THEN go to the larger sizes. And so this is the concept behind Bootstrap. I always have the pages for setting up layouts open while I’m building a website, especially since Bootstrap 4 came out and a lot of the style names have changed. But this allows me to save a whole lot of time creating mobile-ready websites. It’s all built in! I just need to customize it all to look like YOUR website, not a Bootstrap website.
Bootstrap 3 Carousels – Related to Bootstrap, a depository of various types of Bootstrap Carousels is a page I keep open for all sorts of sites that get built. This particular one was done for Bootstrap 3, which has since been replaced by Bootstrap 4. But it’s not difficult to convert the layouts to the new settings. There are carousels for the tops of homepages, quotes carousels, and carousels for product listings. I have used almost all of these carousels in various projects, so it’s been absolutely invaluable to me!
FontAwesome – What did we ever do before FontAwesome came out? Wow. This one really changed things for me when it came out a few years ago (we’re now up to v5, which uses SVG versions of the icons – this doesn’t mean much to you if you aren’t a developer, but suffice to say that SVG graphic elements are AWWWWWWWWsome). Before this, if you wanted to include various icons for things like Facebook, Twitter, a Play button, a magnifying glass, etc., your primary choices were image sprites (which I always found to be a bit of a pain to deal with), creating the icons yourself and uploading images, or creating your own custom set of icons in a custom font (which is a huge pain in the patoot). Today, all you have to do is reference this handy-dandy font, and you have hundreds of crisp, clean, approved versions of icons for nearly everything you can imagine! It’s…wait for it…fontAWESOME!
Stackoverflow – yeah, see, sometimes I can’t figure out why a thing isn’t working right. Or I’m trying to figure out how to do something that I’m *certain* someone else has done and had trouble with before too. More often than not, I can find answers here at Stackoverflow. I’m a decent coder, but there are folks on here that live and breathe code. It’s pretty great!
I also depend on one WordPress plugin (the items listed above are not plugins, and can be used for any kind of website, regardless of the backend framework. This one is specific to WordPress). And that’s Advanced Custom Fields. Hands down, this is the single most useful plugin I have ever encountered for creating truly custom websites. It makes adding custom fields to your pages/posts/custom post types a breeze! Sure, I could create them by hand. But why spend that time when you can use this incredibly powerful plugin that does the heavy-lifting for you? This is the plugin that allows me to turn WooCommerce into an excellent event ticketing system for performing arts organizations. This is the plugin that allows me to set up my client’s administrative backend in such a way that they truly don’t have to know how to code anything. If they want to include an audio clip on their page? Easy. If they want to have specific fields added to their event/product descriptions? Yep. Here’s what to use. And I nearly always have their support forums open to assist in reminding me how to call the various types of data properly. When I have questions, I get answers pretty quickly. It’s just, hands down, the most useful plugin around for WordPress sites. Well worth paying the annual fee for the pro version!
TinyPNG/JPG – A super cool free online utility (up to a certain number of images at a time – then you can purchase an unlimited membership) to help optimize your images for the web. Sometimes you want to use some really cool images, and that’s great! But they can sometimes be really memory intensive if they’re large. I try to run all JPG and PNG images through this optimizer before uploading to any website. It helps make sure the site loads as fast as possible.
I almost don’t even mention this item because it’s so ubiquitous, and used by nearly every website nowadays, but the piece of scripting that runs pretty much all of these things (for instance, many of the components of Bootstrap simply will not work without it, and it even comes pre-installed on all WordPress sites) is jQuery. I’m not an expert script writer. But I know enough to make some pretty cool stuff happen – and it’s almost always driven by either jQuery or Java (yes, they’re different things). Those cool carousel sliders you see everywhere (maybe too much in recent years)? Yeah, they’re usually done with jQuery. Animations you see as you scroll through a website? Nearly always made possible by jQuery. jQuery and PHP/MySQL pretty much run the web these days. I’m not providing a link to it because it’s just too much to bother digging into unless you need to. Suffice to say, it’s an absolute necessity on the web these days.

So, there you go. A quick rundown of the basic components I use when I build a website. There’s always a lot more than just these, but these make up the basic framework.

What are some of your favorite frameworks and resources when you’re building a website? Tell me in the comments below. I’d be interested to know about others that I should add to my list.