A new website? It has that new website smell!

Christopher Jones Web Tags:

So how did this website come to be exactly?

I got the itch to revamp my professional portfolio and take a deeper dive into WordPress theming than I have before. I set out to develop my own theme — a template that could be used for several applications, like a portfolio site, restaurant or small business, blog and more.

After spending a lot of time with video tutorials and the unbelievably useful WordPress Codex, I set out to build this bad boy. It was important that I do it in a structured professional environment, even if it was ultimately a personal project.

Step 1 (Design)
Before I even got started writing code, I went through the process of designing a number of mockups for the site in Photoshop.
Mockup image
As you can see — a few tweaks were made along the way, but overall we are pretty much where we should be. I knew I wanted a clean, flat design that would be versatile and responsive (obviously).

Step 2 (Static Site)
With my design ready to go, I built a completely static version of the website (HTML/CSS — no PHP or WordPress integration yet).  Like most lazy developers, I used Bootstrap framework (3.3.7 to be exact) for the layout of the site, because it makes your life infinitely easier. Naturally, the site uses Bootstrap jQuery and original jQuery Javascript libraries — mostly to make the parallax images function and the menu function. I also used Google Fonts for web-font hosting and FontAwesome to load glyphs for some of the interface components (like the tag and file icons on the blog). It loads a little bit faster than using images. The menu is a Boostrap nav menu using the nav-walker add-on to make the dropdown work. Again, you could build your own menu but given how easy it is to customize a Bootstrap framework, I don’t see the point. At least not for this project.

You wouldn’t know this by browsing this site in particular, but I actually have a number of page-type templates to choose from. Including:

  • Full-width content (no parallax)
  • Full-width content (with parallax)
  • Content with sidebar (and parallax)
  • Content with sidebar (no parallax)
  • Custom homepage

Once I had my static site ready go, I then began the WordPress build.

Step 3 (WordPress on localhost)
I do have a webserver but given the amount of back and forth you go with a project like this, it would take twice as long to build into the development of a project having to clear my browser cache and upload files through FTP, so I did the responsible thing and set up a XAMPP server on my local machine. From here, I essentially cut up the static site into the various WordPress components by importing them into an Underscores theme. I’m sure there are folks who build websites without using this framework, but I can’t see why that would make sense for anything relatively basic, like this site. Fast forward through a lot of coding and edits later, and I had a functional theme on my localhost, ready to import to my server. Most of the fields on my site are managed by Advanced Custom Fields plugin. This is another tool that I’m sure some folks don’t use but I can’t see why you’d want to. It makes life unbelievably easy for setting up easy-to-use content editing in the back-end of the site. Pro is definitely worth it.

Step 4 (Launch)
And now we’re live! The launch process was pretty straight-forward. My host gives me the option to do a quick WordPress install, but I did the manual one instead — with a manual install there’s less ads and bloatware included in the build, and it takes only a few minutes longer. Uploaded my theme to the new site, migrated all my plugins and exported everything from my local PHP database using the phpMyAdmin tool and then imported that data into my live web server database. I used https://github.com/interconnectit/Search-Replace-DBSearch and Replace DB to change the directory/URL/database prefixes to match the new environment. Again, this is another tool that I’m sure you could get by without using but man it saves a lot of time. Once I made a few more security tweaks (plz don’t try to hack me, hackers), and linked my shiny new domain, I allowed search engines to index this site using my robots.txt file, and we’re essentially public.

Step 5 (Live)
So now we’re live. This is a fully responsive, versatile website with multiple page templates and a code-free customization interface in the back-end. For this to work, I use a number of additional WordPress plugins and libraries:

Codebases or external framework:

So now here’s the million dollar question. You like the site and you want to download the theme to use for yourself. You my friend, are in luck. The theme file and plugins folder are available below.

Little Astronaut WordPress theme on GitHub. 

Enjoy!

 

Leave a Reply

Your email address will not be published.