In 2007, I was stuck. I was in college and had this exciting campaign I was working on with a bunch of friends – but none of us knew how to build websites. I realized then how critical a skill web design is for activists and how few activists knew how to do it.
So I decided to teach myself and now I want to pass that knowledge along to you.
This tutorial is going to focus on building a website on a self-hosted WordPress installation. There are a few reasons I recommend WordPress: it’s flexible, you have full ownership over everything, it’s open source, and it has a massive community building things to make the platform better and easier to use.
This tutorial is written for people of all skill levels – you don’t need to know how to code. What you do need is time, commitment, and about $100. Building a website is nowhere near as complicated as it’s made out to be, but it does involve a lot of troubleshooting.
Let’s dive in.
Step 1: Get a Domain
From a technical standpoint, this is one of the easiest steps. Go to a domain name registrar, type in the domain name you want, and hit the ‘buy’ button. That’s really all there is to it.
The domain registrar I currently use is Namecheap. I’ve been with them for over 5 years and have never had any issues. Google Domains, Gandi, and Hover are other popular options. Godaddy is one of the most famous, and is slowly improving its corporate practices, but I would still avoid them if possible.
That was the easy part. The hard part is picking which name to register and what ‘top-level domain’ (TLD) to register it under – that’s the thing appended to the end of the name you want. The best option is almost always .com or .org, but there are now a huge number of options, allowing for some creative naming techniques.
The benefit of using a less common TLD (like .co or .io) is that the website name you’re interested in is more likely to be available. The downside is a) your website will come across as less professional if you’re using something like .info, and b) if somebody goes to the .com or .org version of your website name they’ll end up at the wrong website.
Now for the actual website name. This is a crapshoot. The odds are the first 10 names you think up are already taken. But once you get into the 2-3 words strung together territory, your options open dramatically. InstantDomainSearch.com is a helpful tool that will give you real-time results letting you know if your website name is already taken.
Total cost: $10-15 per domain
Tip: Avoid registering your domain where you host your site. Although many companies offer the option to do both on a single platform, registering a domain and hosting a website are very different technical needs. It’s best to have your domain registered and website hosted with companies primarily focused on that specific service.
Step 2: Find a web host
This is where things start to get real – and often the scariest part for folks just starting out with their first website. Luckily, most website hosts now make it dead simple to get up and running quickly on a custom WordPress installation.
First, a word about what exactly a host is. Essentially you’re renting space on a computer inside a server-farm. It’s possible to build and host your website on your home computer, but nobody ever does this because it would never be as reliable as what you get from a professional host. The best hosts have incredibly high uptime and can handle massive data spikes, something your home computer can’t do.
But the principle is the same. They host a copy of your website on their server and send it out to anybody who types your domain into an internet browser.
The host I use is MediaTemple. Sadly, they recently got bought out by GoDadday, but the service has remained top-notch and I continue to recommend them. I have a DV server and a GS server there – DV being their premium offering.
The prices at MediaTemple are a bit steep for somebody starting out with their first website – especially if they only plan to have one. Another hosting option is A Small Orange. I haven’t used them, but have heard good things. They have far more reasonable prices for somebody just starting out.
Don’t worry too much about bandwidth or server space if you’re unsure what you’ll need. Stick with the smallest to start and grow from there.
Total Cost: $35-250 per year (more if your site gets a lot of traffic)
Step 3: Connect your domain to your server
This is where the magic happens. Now that you’ve got a server and a domain, you’re ready to go! To link things up, you’ll need to point your DNS records to your host. This is less complicated than it sounds.
The admin panel of your domain registrar should be a button that says ‘transfer DNS to webhost’ – or something like that. Inside should be a couple of blank boxes. You’ll need to find what servers your web host wants you to use. The easiest way to do this is to google ‘[company name] nameservers’. So, ‘MediaTemple nameservers’, for example.
This should link you to a page with two similar website addresses. For MediaTemple, they’re:
for A Small Orange:
Once you type that into your domain registrars page, it’ll take a few minutes to transfer over (propagate).
Step 4: Install WordPress on your server
Now we need to get WordPress on your server. To do this, most major web hosting companies offer 1-click installations of major content management systems (CMS).You’ll need to first ‘add a domain’ to your hosting account before using the 1-click install. This tells your server where to install WordPress.
Depending on your webhost, it may ask where you want WordPress installed. You want it installed on ‘yourdomain.com’,not yourdomain.com/wp – which is often the default.
Your webhost may also want you to name your database file. This doesn’t really matter, since you’ll rarely need it. Give it a short name that’s unique to your site.
This is the moment of truth. Once it’s installed, your webhost will let you know. From there, you can type in your domain into your address bar and BOOM, you have a website. You’ll be taken through WordPress’s super simple setup process and that’s it!
Go to yourdomain.com/wp-login to get to the backend, which is where all the action happens with WordPress.
Tip: If you run into problems during this step (ie typing your domain in the address bar doesn’t bring you to your website, give it some time. The internet can be surprisingly slow and updating these sorts of things. If you’re really impatient, you can use https://www.whatsmydns.net/ to see if there are any issues. If the list it gives you has multiple ip addresses, that’s a good thing. It means things are propogating and you just need to wait a bit longer.
Step 5: Find a wordpress template
Now let’s make your website look good.
This is the shortcut that’s going to make this whole thing worthwhile and possible for the average person to tackle. WordPress has a MASSIVE ecosystem of themes and plugins that are basically plug-and-play. They take care of all the coding for you.
There are a whole bunch of places you can find templates, but the two best repositories are themeforest.net and creativemarket.com. I also like themetrust, studiopress, theme foundry, woothemes, and graph paper press. All of these places have ‘premium themes’, which cost money, but WordPress also hosts a massive database of free themes which you can find here.
If you want to find the perfect theme, prepare to spend a huge amount of time. There are an endless number of themes out there and digging through them all for the perfect gem can be challenging. My recommendation is to know what you want before looking at themes, which speeds up the whole process, allowing you to open the demo and immediately decide if it’ll fit your needs.
I don’t have much else to add in this step because so much is based on personal preference.
Tip: When looking at theme demos, the trick is to ignore the images, colors, and fonts. Those are all things you’ll be able to change later. What you’re looking for is an overall structure that will work well. Think of it as buying the skeleton of your website. The visuals of a website can quickly and easily change – the overall structure of how pages are layed out can’t be changed as quickly. The homepage layout is particularly important to get right.
Step 6: Get your theme set up
Once you’ve chosen a theme and downloaded it, WordPress makes it pretty simple to get it loaded up. Under ‘Appearance –> Theme’, there’s an option to upload a .zip file (the correct .zip is often embedded in the .zip you first download). From here, activate it and check it out on your live website. Chances are it looks like crap. Don’t worry, this is normal.
At this point, if your theme came with instructions or a guide, read every last word. This will answer 90% of your questions that come up. Some of the more complex themes also require you to upload demo content, install plugins, or change specific settings to get them looking right.
My first objective is often to get the website looking like the beautiful demo I saw. This can take a serious chunk of time. Make sure you upload any demo content the theme file came with. You can do this under ‘Tools –> Import’. And go through the theme settings page in the backend if there is one.
Once you’ve got things looking relatively normal, the fun begins. This next step is where you start to make your website yours.
Step 7: Theme customization
This is the step you’ve been waiting for. Making your website yours. The whole point of building your own website is having complete control over it. Let’s take advantage of that.
To start, upload all the content you’re going to want on your site. This is done via ‘Pages’ and ‘Posts’. Once you’ve done that it’s time to make some customizations.
Depending on your theme, you may have a robust WYSIWYG theme editor or options panel. These allow you to change a wide variety of things (colors, logos, fonts, etc). Spend some time exploring these options and making adjustments as you see fit.
You’ll also want to familiarize yourself with your widgets. These are spaces on your website that can have content placed in theme via the ‘Widgets’ option in the backend. I often place a simple text widget in each space to orient myself with where they all are.
At this point, if you’re happy with the way your website looks, perfect. You can stop here.
Step 7.5: Advanced theme customization
If there are still changes you would like to make and you’re not afraid to mess around with the website’s code, this is the step for you.
The great thing about web design is that you an see the results of your tweaks immediately and, as long as you’re careful not to delete anything, it’s pretty hard to screw things up.
The main file you’ll want to familiarize yourself with is style.css. You can find this in the wordpress backend under the ‘editor’. If you want more control, you can also use and FTP client or HTML editor. I use Transmit and Code for Mac. Two fantastic free options are FileZilla (cross platform) and XXXX. Your webhost should have instructions on how to connect to your server with an FTP client.
CSS is the code that styles everything on the modern web. It’s every color, every font, every margin. And you have completely control over all of it. Once you’re in the file, start messing around with it (just don’t forget what you did, so you can undo it). This is the quickest way to learn. Change one of your margins to 500px and see what happens. Then change it back.
But how do you figure out how to change something specific? This document is huge! Good question.
This is where the most important tool in this entire document gets revealed: Firebug. This is the plugin for firefox that taught me how to code. Google Chrome has a similar ‘Inspect Element’ tool when you right click on a page – but I would recommend Firebug for it’s ease of use.
What makes firebug special is the selector tool. That’s the little rectangle box on the top right of the plugin panel. Clicking this gives you a magical decoder ring for the entire internet.
Hovering over something on your own site that you want to change now pulls up the HTML and, more importantly, the specific line of CSS that’s determining how it looks. This is important because every line in the style.css document is numbered, letting you pinpoint what you want to change.
Whether it’s a margin, a font size, a color, the spaces between lines of text, etc. It’s all under your control.
Tip: Best practice with WordPress is to make modifications outside of your core template files. This avoids a scenario where you update your theme and overwrite the edits you’ve made. The easiest way to do this is to install the Jetpack plugin and to use its ‘custom css’ option. Any css in the custom css panel will overwrite your original theme’s css. All you have to do is copy the chunk of css you want to modify into the custome css panel (along with the class/id selector) and make your modifications there. You can also make edits via a ‘child theme’, though this is more complicated for beginners..
Step 8: You’re done!
And, with that, you now have everything you need to make a kickass website on the cheap. It will take a good amount of time the first few times you do it, but the payoff is so very worth it. Building something that you have complete control and ownership over is an incredible feeling and makes the whole process extremely rewarding.
The web is a beautiful, crazy place that’s (at least for now) still an open platform that anybody can build on. So get to it, go build that site you’ve been dreaming up. The web needs more creators helping to make beautiful digital spaces for all of us to enjoy.
Good luck out there.