CSS Example

How to Make a WordPress Website Like This One

This is an overview of how to make a website similar to this one using WordPress. It's basically a roadmap. It does not get into the nitty gritty of how to actually write HTML, CSS, and JQuery or use The Loop.

Learning anything related to web development requires extensive Googling. To save you some time, here are some great resources for learning front-end web development and making websites with WordPress.

  • Treehouse: so incredibly useful. The easiest way (I think) to learn to front-end web development and lots of other cool stuff. Not cheap at $25/month, but it's worth every penny.
  • Professional Wordpress: Design and Development: the best book for learning WordPress development. Goes deep into The Loop, WordPress Security, etc. Buy it.
  • Advanced Custom Fields: essential plugin for making custom fields on your WordPress website (makes it easier to create cool-looking posts like this with different content layouts).
  • Google: the best way to learn anything. You will get stuck every half-hour and this will be your only saving grace.

Learn HTML & CSS

What the @#$% are HTML & CSS?

Without getting into the boring jargon-y stuff, HTML is essentially the structure of a webpage. It's where the content lives: text, images, lists, links, etc. In WordPress, we use ".php" instead of ".html" because PHP is a more useful language for a variety of reasons. I don't know the details of this…

Find a more detailed explanation of HTML here.

Learn more about PHP here.

HTML is essentially the structure of a webpage. It's where the content lives: text, images, lists, links, etc.

HTML Example

This is what your HTML/PHP might look like in WordPress. Text editor is Sublime Text 2.

Whereas HTML is the content of a webpage, CSS is the style. With CSS, you control things like typeface, color, spacing, etc.

Find a more detailed explanation of CSS here.

CSS Example

This is what your CSS stylesheet might look like.

In front-end web development, we separate content (HTML) and style (CSS) into separate documents. This saves us time and makes our website more flexible. If we had to dictate style and content in the same document, we would repeat ourselves constantly.

Instead, we tag our HTML elements with classes and IDs that link to our stylesheet. If we attach the class "example" to several HTML elements, we can control the style of all those elements at once by adding style attributes to the class "example" in our stylesheet. Otherwise, we'd have to add the same style attributes to each element separately.

Here's an example:



Separating content and style lets us avoid applying individual styling to the two HTML elements above. We just tell the browser to apply the color "#0461ca" to any element of the class "blue." Simple and efficient!

Learn Some JQuery

While I don't understand JQuery very deeply, I've been able to use it to create some basic functionality on this website. This might be all you need (you don't have to waste time learning something more deeply than is necessary).

JS Example

This is what the script for your website might look like.

What is JQuery? I'm not quite sure. But I do know that the mobile menu on this website uses it. JQuery is the language you use to tell the browser to do something when you click on the mobile navigation button in the top right corner of this website. You might also use JQuery for things like image carousels, modals, and other interactive features.

Learn more about JQuery here.

Learn How to Develop with WordPress

Once you've got HTML, CSS, and some JQuery under your belt, you're prepared to learn how to build websites using WordPress. WordPress is a CMS (Content Management System) that is useful for creating websites with dynamic content.

When I log into this WordPress website, create a new blog post, and hit "Publish", the new post shows up on my "Blog" page. There are many reasons to use WordPress, but this is the most common one.

See the links at the top of this post for some great resources for learning WordPress.

    Why is WordPress awesome?

  • Easy to add plugins from WordPress.org to expand the functionality of your website
  • Simplifies the process of building a website in general (once you get over the learning curve)
  • Streamlines the task of adding new content to your website in the form of posts
  • Has a massive community which makes it easy to find answers to your questions
  • …lots more that I'm probably forgetting

Good luck with WordPress and don't give up! It may be challenging to learn at first, but it's worth it.