Built With

Getting started on your own website? Here is a basic run down of the software and resources that I have used to create this WordPress site.

Back-End and Basic Theme :

If your site is defined by its content, you will need an efficient management system and the ability to customize your content to the needs of your site.

WordPress Content Management System

Content management systems (CMS) are designed to create and manage websites, blogs, or apps. WordPress is a great start for most projects, but if the core system does offer the functionality you need, a range of open source and commercially available plugins will add that missing functionality. Still not the correct solution, check out some other options.

Pods WordPress Plug in

A plugin for WordPress, Pods allows you to modify existing content types or add completely custom content types. Installation is simple and with a range of tutorials and a supportive community customized content for your next project is within reach. Just starting? Launch with the core functionality and add the custom content as necessity dictates.

Custom Front-End :

With the functionality to store and serve that golden content, a thoughtful and clear method of presentation will make that content truly shine.

Beans WordPress Theming Framework

A powerful and flexible WordPress theme, Beans offers a handful of initial themes and the front-end library to build your own child theme. Beans integrates with WordPress Core library and plugin structure. Beans gives you the power of LESS, CSS3, HTML5 and jQuery to customize your entire WordPress site, specific pages or content elements. Follow the simple installation process and take advantage of well documented functionality.

UI Kit Framework

Speed up the process of creating your custom theme. UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit gives you a comprehensive collection of HTML, CSS, and JS components which are simple to use, easy to customize and extendable. UIkit is an open source framework and comes by default with Beans so getting started is simple. Not ready to jump into the development deep-end? Add a few finishing touches to your site or explore design ideas before implementing a final solution, Beans plus UIkit will make short work of the theming process.


Less is a CSS pre-processor, extending the CSS language with a collection of functions, variables, and mixins. The tools you will need to make CSS more maintainable, themeable and extendable. There are many examples , resources and tutorials on the web and even on this site to get you started.

Now that the back-end and front-end are working together, your website will need to be tested and tweaked, and tested again, to be fully functional.

Mozilla Firefox

In Mozilla’s Firefox right click on an element on a web page. From the pull down menu select Inspect Element (Q) the code inspector will appear and you can view how the site functions. Even more powerful, inspect JavaScript as it executes, set markers to pause the process or simply modify the CSS rules to see the effects in real time. Edit your code outside of the browser to save those changes or refresh the page to return your view to the original settings.

UI Kit Framework
Chrome Canary

Google Chrome’s Canary is a special version of Google Chrome that is targeted at developers and is a frequently-updated experimental build that gets the latest changes before any other version. With bleeding edge technology, regular updates, flags and browser extensions Canary will keep your site stable and ahead of the curve. Check out Google’s Chrome Developers documentation website and sign up for Dev Tips for animated tutorials to get you started.

Additional Plugins :

Make your site attractive, gain insight into your audience and allow them to reach out to you.

WordPress Plugin
Yoast SEO

Make your content mouth watering on search results, Yoast a Search Engine Optimization plugin, helps optimize your pages content with a suite of free and commercially available features.

WordPress Plugin
Google Analytics Dashboard

Learn how visitors found your site and what kept them coming back. Use the Google Analytics Dashboard plugin to get set up and fully dialed in. Take advantage of all the resources offered by Google Analytics.

WordPress Plugin
Contact Form 7

Let visitors get in touch without putting your self at risk. Contact Form 7 can manage multiple custom contact forms and the email contents with simple markup, CAPTCHA and Akismet spam filtering.

Design Resources :

add a few finishing touches and make your site really pop.

google logo
Google Fonts

Have your website speak directly to your audience with an elegant font. Add fully supported font families with Google. Browse and select fonts and embed directly into your CSS. Google even hosts the required files.

css device iPhone 6
CSS Devices

Place device specific content within conversational context. Show screen snaps within the screens that they were pulled from. Written in pure CSS these devices load quickly and can be customized.

WordPress Command Line :

Installation of WordPress plugins is very simple process using the WordPress Command Line ( WP-CLI ) tool. WP-CLI is a command line interface for WordPress providing a convenient set of command-line tools for managing WordPress installations. You can update plugins, configure multisite installs and much more, without using a web browser.

To install a given plugin go to the WordPress plugin page and find the [ Download Version #.# ] button and right click to copy the target link location.

example plugin page example plugin page and download button

Next jump onto your local terminal and login to the server of your WordPress site, most likely using SSH. With the following command:

wp plugin install PASTE LINK HERE

you can easily add a plugin to your site.

From the Pods plugin page above, here is the correct command.

wp plugin install https://downloads.wordpress.org/plugin/pods.2.6.7.zip

Filed under: Notes
Tagged with: ,