Building our WordPress Website. How we did it?

While being focused on delivering high quality WordPress products, we have been neglecting our brand awareness for quite some time already. Therefore, starting to build our first company website looked like the perfect start. We are excited to show you how we did it and what tools and services we used to build our website.

The shoemaker’s son always goes barefootSome Idiom

Wire-Framing & Designing the Website

The first step when building a professional website is to start drawing your ideas and sketching a wireframe. This should include the core elements of the website, such as content boxes, graphics area, navigation, etc; We used a classic pen and paper wireframe, to draw out a rough sketch of how the website should look.

We will not share it, as it will not look very appealing after being drawn, erased and drawn again a couple of times, but trust us we did it. We like doing it the old way, but we can also recommend using digital wire-framing tools such as: Adobe XD, Balsamiq, UXPin, and other similar tools. We use them ourselves for big projects, with lots of screens and collaborative teamwork.

Design the Actual Website using tools such as Adobe Photoshop & Adobe Illustrator

After we were finally happy with our wireframe, we built the website in Adobe Photoshop CC, which is the tool of choice when it comes to building websites; we also use Sketch from time to time, but Photoshop seems to be more consistent, therefore we recommend it as the number one choice.

Also, we used Adobe Illustrator quite a lot for this website, as most of our graphics are scalable vectors (SVG), which have a huge advantage over traditional formats such as .PNG or .JPG files. The SVG files scale all the way across any resolution, always looking sharp and perfect, also with very low file size usage. We tried using SVG files as often as possible, because they are faster and simply look better.

Graphics and Digital Resources

During the creative process that followed, we needed to include great looking graphics, so we went out browsing the marketplaces and came up with a pretty good shopping list from all major marketplaces: GraphicRiver, Envato Elements and Adobe Stock.

Vector Graphics We Used

Graphics should look good on any device, no matter the size of the screen or the operating system. Therefore, we opted for a modern file format where possible. Here is the list of things we used, where and how we used them and the source of the files.

Custom Website Typography

We wanted the website to have the look and feel of our brand, so we used the same typeface of our logo, which is Aktiv Grotesk by Dalton Maag from the Typekit Library.

WordPress Speed Optimization & Increased Security from Cloudflare

Before getting to website hosting, we have to start by mentioning a great service that we fully recommend. Cloudflare’s motto is “Make the internet work the way it should” and this is something we trust them for it. They help us manage our DNS and add a layer of protection and optimization for our WordPress website. There basic plan offers great tools such as:

• Analitycs for your website;
• DNS Management; super easy to use and a very nice interface to manage your DNSs;
• Free SSL certificate; very good for security and Search Engine Optimization;
• Web Firewall for your website;
• Speed optimization;
• Caching and many other cool features.

You can also choose the Pro Plan for $20 / month, which will add some extra features, that we really like and consider very useful, such as:

• Protection against your website going offline, caused by hosting; If for some reason the website is unaccessible, Cloudflare will display the latest cached version of your website;
• Speed tools such ash Mirage & Rocket Loader.

Managed WordPress Hosting with SSL, CDN & Caching Included

Good hosting is critical for a modern website, in terms of security, speed, reliability. We went with the same hosting provider as for all our sites, WPEngine; and the reasons for using their hosting service are quite simple:

• They offer managed WordPress hosting;
• They have great development and staging environments;
• They offer good CDN & caching options;
• Many other cool features, such as free SSL certificates which are recommended for security and SEO.

Choosing the WordPress Theme as Your Website Framework

Since most of our themes are very versatile tools to create websites, we wanted to show off a little bit, so we chose our latest Dance WordPress Theme, as our solid framework. We will, of course, create a small child theme and do all customizations there, so we can safely update our theme and plugins; choosing this method of website configuration will ensure a longer lifetime for your site.

Choosing the Right WordPress Plugins for the Job

Visual Composer

Our recommended choice for content building, Visual Composer deserves its huge popularity. We use it for both simple and clean sites, such as this one, and advanced content customization.

Slider Revolution

You rarely see nowadays a website without a slider, because it is such a simple solution to grab your visitors’ attention. We include Slider Revolution in all our themes, it is simply the best.

Mailchimp Integration

We used the official Mailchimp WordPress plugin, to collect addresses for our newsletter. You can find it here: Mailchimp List Subscribe Form. Also, you can search for it in the WordPress plugin Repository and install it directly from your dashboard.

Add Customizations and Functionality by Creating a Child Theme

We started off with a basic child theme, by creating a folder called curlythemes where we placed a style.css file, setting up the right comments for our child theme and loading up the main theme style.css.

https://gist.github.com/raducretu/a6a4968840e2328ce3270df8af289410

We created the style.css file by compiling a style.scss file. We use SASS language to generate our css files as it brings a lot of flexibility and allows for much more organized code. In order to speed up the workflow, we use Codekit to compile the SCSS file to the final SCSS files;  also Codekit complies JS files which allows very easy management by file importing and JS linting. The advantages of using this tool are:

• Auto prefix CSS rules
• JS combine file + JS lint
• Organize by projects
• Preview local site on all devices (internal server)

Functions.php Custom Theme Code

All custom functionalities go mostly in the functions.php file, which will be loaded by WordPress as soon as it is found in our child theme folder.

The first thing we wanted to do was to safely integrate the Typekit library. We do this by adding the Typekit library in the footer and add the Typekykit CSS class to the body. To add the Typekit library in the footer, you should add the following code:

https://gist.github.com/raducretu/a9797a1a4fca0c39fc9702e3c21a27af

After adding the font library in the footer, the last step is to add the Typekit CSS class to the body, we do so like this:

https://gist.github.com/raducretu/c21fe0e8aad8c8106733ad3291433936

Typekit integration can be very safe & easy, if integrated correctly. We have created a small snippet that you can follow on GoodWP.org about how you can insert the Typekit library in your website.

Mailchimp Customization

We wanted our Mailchimp form to look a little different, so we added some lines in the style.scss files, nothing special about this. But more important, we wanted to add placeholders to our mailchimp fields, and this might be interesting to see how we did it.

We created a scripts.js file, which we loaded in the theme, the correct way, and we added some small JS code to add the placeholder. Let’s see how. First, we will add the scripts.js file to the website using standard WordPress hooks, like this:

https://gist.github.com/raducretu/015a0f55f49014e8d015803e4469fb2c

Now, we need to add the JS code to the scripts.js file, in order to actually add the placeholders.

https://gist.github.com/raducretu/9c05beb06a69c48c21627649a82ac4b9

Atom is the Code Editor we used

After participating at WordCamp Europe 2016, we noticed everybody speaking very nicely about Atom by Github, a very hackabale and open source code editor. We tested it long before this, but it didn’t seem very solid at that time. With the recent versions it became solid and stable, so we switched to it from Coda by Panic, which is also a very good code editor we recommend.

Some Other Tools we Enjoyed Using while Building our Website

You might consider some of the tools listed below, for which we have to show our respect also:

• Jetpack by WordPress.com adds salt and pepper to your WordPress;
• Yoast SEO helps you create better content and helps showing it to others also;
• Ninja Forms or the Swiss army knife for WordPress forms creation;
• Compress JPEG & PNG images by TinyPng;
• Akismet silent & spam pest protection.

If you enjoyed reading this article, please don’t forget to subscribe to our Newsletter and we will let you know when something new comes up.