Building a WoW Talent Calculator

I have always been a fan of the World of Warcraft talent calculator. It was quite the bummer when it began to change during the expansions.

Dope.

To me, this is a classic RPG talent tree. It has a couple notable elements:

  • Progression through the tree starts at the top in tier one
  • A point limit needs to be met to unlock subsequent tiers
  • Occasionally, you will need points in talents from one tier to access more powerful talents in another
  • Each tree works on a separate set of points, but all points are taken from the same pool of total points available.
  • You can’t remove points from lower tiers if points exist in a higher tier

Simple, yet, intelligent design.

A new challenge approaches

World of Warcraft Classic is on the horizon, with a release date of August 26th in the states.

Many classic fans are spending their time creatively awaiting this launch date, though some…not so much.

One thing that I was intrigued by was the ClassicDB talent tool – https://classicdb.ch/?talent

I thought, this would be pretty cool to try and recreate in Javascript.

I spent a little time sketching out the possibilities, the logic, and the requirements in Adobe XD.

Then I took to Codepen to try and build out a basic three column CSSGrid.

The resulting grid works nicely. It stacks on mobile and alots the correct amount of space for each talent.

A plan

As I began reverse engineering the logic in the ClassicDB talent calculator, I realized this project was a bit more complicated than I first thought. I knew I would use jQuery to build out the project. I knew I would use Codepen to document the work and also help share it on Stackoverflow if I got stuck.

But as I worked through the logistics I came across a couple realizations:

  • The calculator’s points need to stem from the same total, but apply separately per each talent tree
  • There are a number of things that occur as a talent is incremented such as adding points to the tree ‘points’ counter, and subtracting points from the overall ‘points total’ counter
  • Each maxed out talent will need a gold border (new class) to represent ‘full’
  • As new tiers are unlocked, previous talents cannot lose (decrement) points
  • This is important since without this condition talents would remain ‘active’ while the inferior conditions are no longer met
  • Adding tool tips to each item seemed easy enough, but, the content of those tooltips change depending on how many points are in the talent
  • Some tooltips call for other talents to be activated first before a superior talent is able to be activated
  • Lastly, this needs to scale dynamically for all classes otherwise building it out by hand would become untenuable

As you can see, the list is long but approachable once written down.

I broke the above into a few sections:

  1. Create the tree ‘grid’ which would suffice for all classes. Make it responsive.
  2. Create the counter logic for incrementing and decrementing the points for each talent
  3. Create the tier progression logic for stepping through each tier
  4. Create a pool of points to pull from and individualized ‘point sums’ per tree
  5. Add tooltips for each talent and adjust their values based on JSON table of values
  6. Create a way to save builds and share them with friends

Journeys are easier to navigate once you draw a map. The map above is a living document so it can be changed as the requirements and blockers call for it. But for now, it is the map I choose to follow.

More to come…

Notes from the future:

While working on this project I managed to get a working draft of the point progression working here:

https://codepen.io/jjchrisdiehl/pen/xxKgwdm

While working on this project I resumed my JavaScript coursework and realized this can be achieved much more efficiently with better event delegation and propagation.

Additionally, I reached out to a Redditor regarding the data they used for their talent tree mobile app and they were kind enough to pass along their files – see here https://github.com/jjchrisdiehl/wowcalc/blob/master/ClassData.js

This provides a great opportunity to parse the ‘class data’ and iterate through the icons dynamically, but that is for a future refactoring of this project.

A Twentyninteen Rebrand

As I began the new year, I decided it was finally time to dust off my FTP client and rethink my website.

Past iterations of my site were mostly just tinkering and devoid of any real substance. Yes, lessons were learned, but some things just need to be burnt to the ground and built from a new foundation.

Introducing….Twentynineteen – erm – child theme edition.

my homepage
Bedazzled.

Now, I’m no designer, but this is a pretty clean page. This didn’t take me too long to put together and mostly involved the following:

Not bad! Let’s look a little closer. I’ve divided the homepage into three sections.

homepage outlined

Section one

The top section is rather straight forward. I simply added my initials as the Site Title, my full name as the Site Description and then set the site description as its own block with some CSS:

.site-description{
    display: block; /* Sets the description on its own line */
    padding-left: .25em; /* Just to line up the left edge nicely */
}

All of which was done directly from the WordPress customizer. Nice.

I also hid the site navigation in favor of embedded links in the body of the site.

Section two

The content section uses the new Gutenberg editor along with a few custom blocks by Kadence Themes.

kadence blocks

What’s great about Gutenberg is that all sorts of block libraries are being developed. The benefit of a Javascript framework is that it creates a foundation that WordPress features can build off of, using one unified component system.

Another awesome benefit of the new Javascript framework is that is can be used outside of WordPress. The Drupal community adopted the Gutenberg editor for their open source project, and blocks built for Drupal can be used in WordPress!

Mixing and matching block libraries is simple and since blocks share a common component system and structure, every block should work seamlessly together.

Kadence has taken the rather lackluster columns block and extrapolated on it, providing rich UI controls and prebuilt column templates.

kadence in action
Pretty cool.

I used an H2 header for the quote, because I like how it stood out, though a quote block would likely be a bit more semantic with a bit of styling.

I then used a Kadence row block to create the fifty-fifty column layout.

Kadence does provide a few prebuilt layouts, which is a really nice feature. This cut my development time down quite a bit since it took some of the guess work out.

Section three

One of the options found in the Kadence row block is the divider setting. This option lets you embed a fancy svg image or bezier curve.

SVGs

At first, I used one of the dividers because I liked how it looked like a mountain range. But as I tinkered with this, I realized that I would essentially need to leave an empty row at the bottom of every page in order to have these mountains appear in the footer consistently.

This is not a very elegant solution, especially since Gutenberg doesn’t support global blocks yet. This can be overcame with reusable blocks, but that still requires you to manually enter them.

The best solution (for now) was to modify the footer.php template file and embed the SVG into the template itself.

Removing layout from the editor and sticking it in the template files sort of defeats the purpose of Gutenberg. Granted, as more core elements of WordPress are brought into the Gutenberg framework, we should see less and less of this.

The first step is to go into the page editor and select the Code Editor from the editor settings in the upper right corner (beside Publish).

Next, copy the separator code, along with its SVG and path elements.

Make sure to select the correct wrapper div.

Now, using a child theme, you can paste the separator code just above the footer section.

Adding the SVG code

This effectively moves the separator out of the content body and into the footer, letting you display the SVG on every page.

The last bit is to modify the SVG’s CSS so that the section is relatively positioned, this allows you to set the SVG to the bottom edge of the content section, just along the top of the footer.

/* Footer Separator */
.kt-row-layout-bottom-sep {
    position: relative;
    height: 250px; /* Adjust the height of the SVG for more stoic mountains */
}

A note on widgets

Twentynineteen lets you add widgets to the footer, but doesn’t offer a sidebar widget area. In my case, this is alright.

In this particular build, I chose to add the Jetpack subscription widget to my footer, which only required a little bit of CSS tweaking to have it sit where I wanted.

Summary

I really liked building out this homepage with Gutenberg, especially when I started to add in custom block libraries. As the editor evolves over time, I believe it will serve as a robust alternative to TinyMCE.

Plenty of WordPress users ask, “why not just use one of the standard page builders like Divi or Elementor.”

That is an option. But Gutenberg aims to solve a more pernicious issue — developers designing user experience. Developers and designers are separate disciplines, usually for a good reason. Not to mention, every page builder is built in a unique and different way. This can be nice, since it gives you many options, but then you run into having too many options.

With Gutenberg, a component system is implemented that says “do this, don’t do that.” The importance of this is that it can create synergy across rich media features on the WordPress platform, something that was never possible before.

I found I wasn’t a huge fan of the large Twentynineteen headers, they just weren’t for me. But the beauty of WordPress is I could just simply remove them.

As I work with more and more websites, I am increasingly looking to cut out bloat and feature creep wherever possible. This approach creates a couple benefits:

  • Decreased page load times
  • Cleaner typography driven design
  • Better accessibility across devices and browsers
  • Less development overhead

I hope this overview inspires you to get under the hood of this year’s latest core theme and create something really special for your own blog.

Northern Short Course

The 38th Annual Northern Short Course (NSC) will be held March 7-9, 2019, at the Renaissance Woodbridge Hotel in Iselin, NJ.

The Northern Short Course is a three day event for professional journalists that offers lectures and workshop series to help foster professional development.

I’ll be leading a workshop titled Why An Opensource Website Matters.

Find out more details here http://www.northernshortcourse.org/sessions/why-an-opensource-website-matters/

Summary of workshop to come!

Introducing…The Web Font Coupe

Google Webfont Loader

Now in Plugin format.

The issue with web fonts is that they can sometimes block the page render, especially on mobile devices. This issue stems from the rendering path. As a website is trying to download resources it may get hung up trying to download a bunch of webfont libraries.

Often you will come across terms such as Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) . These terms refer to the scenarios that occur when web fonts are loaded from a hosted library.

The first happens when a website waits for the webfont to load, this pauses the loading of the page till the font downloads completely. This is typically considered the worst of the two scenarios. The FOUT is preferable because a default style will load while the webfont is downloaded and then the webfont will style the page causing a brief disruption to the user experience as the styles change. Typically, unstyled text is better than no text.

Enter the WebFont Loader. Google has created a javascript library that will add styling to the <code>html</code> block that will provide whichever default style you wish until the webfont is properly loaded, then seemlessly switch the styles to webfont, thus allowing the page to load properly before styling. This will have a great effect on your page load.

The plugin is in its infancy but basically adds the link to the javascript library, add the script for the Webfont Loader and then allows the user to specify in the dashboard which fonts they would like to load from Google.

I plan to add functionality for other webfont libraries such as Fonts.com etc. For now, Google will have to do.

I am launching Version 1.0 this month, check back in for more details in the upcoming weeks!

How I Got A 90 PageSpeed Score

…And why a ‘100’ isn’t always the best option

Note: I have since moved on from my custom theme to Twenty Nineteen (and perhaps something else since this note was added). The principles included in this post are still valid regardless of the theme you use. In practice, using a default theme is a good idea as they’re well coded and usually rather simplistic. As always, less is more on the web especially when building for a mobile first world.

When I began designing this blog I knew it had to be fast and I just couldn’t stand the idea of having too much bloat. It is always tempting to go the route of ‘theme builders’ but a lot of these customizable themes are heavy with extra features that most websites may not use and add in additional resource calls that may slow your page load if not properly dealt with.

So I coded my theme from the ground up. Utilizing TeamTreehouse’s tutorial Bootstrap to WordPress Theme I slowly pieced together a functioning website.

I felt I was on the right track, but my concerns were not being addressed; I wanted this site to load in under two seconds. After running my site through Google Pagespeed Insights, GTMetrix and Varvy.com I took note of the main issues.

Varvy and Google essentially gave me the same information so here is a quick copy paste from Varvy.

Server:

Quick server response time
Compression not enabled
Browser caching issues
Keep-alive not enabled
Minimal redirects

Page:

No bad requests
HTML not minimized
Request size is fine
Visible content prioritized
Render blocking CSS / JS found

Resources:

Images not optimized
Javascripts seem async
 CSS minified
No @import CSS
JS minified

Apparently, my website was hurting in a lot of ways. Using this baseline I set out to methodically correct each issue. I will go step by step through these common issues and then list some helpful plugins at the end. These plugins should assist those of you who are hesitant with editing your code.


Server

Compression

Enabling compression on your server is a vital step towards decreasing load speed. Enabling compression allows your server to send smaller files, thereby speeding up your website.

The average user can enable what is called Gzip compression. It is very simple and requires adding a bit of code to your .htaccess file via FTP.

Warning! Whenever you are editing your .htaccess file you must be sure to make a copy of the original before you make edits.

Add the following code to your .htaccess file after ##End WordPress:

[php]

&amp;lt;ifModule mod_gzip.c&amp;gt;
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
&amp;lt;/ifModule&amp;gt;

[/php]

Browser Caching Issues

Browser caching is a great technique that helps us avoid loading the same files over and over. Browsers can cache all sorts of files such as images, favicons, libraries, and fonts.

By enabling browser caching and setting an expiration for your files you are telling the browser to remember an instance of a file until told otherwise.

Here is the code I use in my .htaccess (remember, make a copy before editing .htaccess):

[php]

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”

## EXPIRES CACHING ##

[/php]

Usually, the browser will update its cache when the files change on the server in order for the browser to maintain the most recent version. By utilizing browser caching we can speed up our site by avoiding unnecessary calls to the server.

Enable Keep Alive

Enabling Keep Alive in the header of your site tells the browser to keep the initial TCP connection open for additional HTML conversation. Every time files are requested by the browser, the browser must ask the server if the files exist. The server will respond with a ‘yes’ or ‘no’ and then decide whether to send a file. If Keep Alive is not enabled then this process must repeat itself over and over, thus delaying the page load.

Keep Alive, also known as a persistent connection, is usually enabled for most servers. But if you are on a shared hosting platform it is possible your hosting provider has disabled Keep Alive for performance reasons. We can enable Keep Alive with one line of code in our .htaccess file:

[php]
Header set Connection keep-alive
[/php]


Page

Minimize HTML

Minimizing HTML perhaps has the least impact on a site’s performance, but nonetheless it is easy to do and will increase your speed a bit. By utilizing plugins such as W3 Total Cache we can reduce the file size by eliminating superfluous line breaks and characters.

Render blocking CSS / JS Found

This may be one of the biggest changes to a website to reduce the render time. In order for a page to load, it must first download all of the requested resources. But sometimes there are a lot of resources such as CSS and Javascript. There are three things to pay attention to in order to avoid blocking the page render.

All CSS and Javascript should be minified and concatenated (combined) into as few files as possible. The least amount of calls to the server, the faster the page can render.

Javascript should be loaded from the footer*, typically before the closing tag.

All necessary CSS and Javascript that is needed to show the above the fold content should be inlined. Everything after the fold can be deferred with this amazing code by Patrick Sexton:

[html]
<img src=”data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7″ data-wp-preserve=”%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20downloadJSAtOnload()%20%7B%0Avar%20element%20%3D%20document.createElement(%22script%22)%3B%0Aelement.src%20%3D%20%22defer.js%22%3B%0Adocument.body.appendChild(element)%3B%0A%7D%0Aif%20(window.addEventListener)%0Awindow.addEventListener(%22load%22%2C%20downloadJSAtOnload%2C%20false)%3B%0Aelse%20if%20(window.attachEvent)%0Awindow.attachEvent(%22onload%22%2C%20downloadJSAtOnload)%3B%0Aelse%20window.onload%20%3D%20downloadJSAtOnload%3B%0A%3C%2Fscript%3E” data-mce-resize=”false” data-mce-placeholder=”1″ class=”mce-object” width=”20″ height=”20″ alt=”<script>” title=”<script>”>

[/html]

This code can be placed before the ending </body> tag in your footer.php file. The file defer.js can be named whatever you like, the only thing to remember is that this file will wait till the page is done loading resources and then will be loaded.

Any scripting you wish to defer should be placed in this file. Things such as Google Analytics, social media code snippets, etc can be loaded after the page render and it should benefit your website load speed if you defer them.

*Warning! jQuery and other Javascript libraries should not be deferred because they are large files that other javascript files, such as your theme.js file, require to load first. There are better ways to defer Javascript libraries.

Resources

Minify CSS & JS

Minifying essentially strips a file of all needless line breaks, spaces, and useless characters. A minified file becomes much smaller than the original file, but is also much harder to read. Typically, minified files should only be used in production because they provide the best performance gains.

There are a number of ways to minify your files. WordPress provides a lot of plugins that can do this. W3 Total Cache, BWP, MinQueue are the ones I am familiar with. But as a developer, it is important to become familiar with task runners such as Grunt or Gulp. I personally use Grunt.

Grunt is a great tool based on Node.js. It is very easy to use and it uses two great plugins:
grunt-contrib-uglify
grunt-contrib-cssmin

As you would expect, these plugins automatically minimize your CSS files and JS files.

Grunt can be a bit technical, if you are simply just using WordPress to blog you should consider the WordPress plugins I listed earlier. I typically use W3 Total Cache because it also offers a lot of caching and compression options, but I am quite fond of MinQueue. MinQueue not only allows you to minify your main stylesheet and JS, but EVERY stylesheet and JS file including the ones that are brought in by other plugins. W3 Total Cache can also do this, but it is a bit more involved.

BWP does this too but it doesn’t allow you to exclude files. I have found that sometimes there are files with dependencies that fail to load if they are minified incorrectly, so this level of control that MinQueue offers is invaluable.

Image Optimization

Images and fonts are typically the largest files your website will load. Image file sizes can easily get out of hand if they are not optimized. Serving a PNG or GIF where a JPEG would suffice is a common mistake that can really add up with each image that is uploaded to your site. Optimization of images is about getting the smallest file size without compromising image clarity.

When you upload images, WordPress automatically makes various sizes of the image based on how your theme defines these image sizes. So before you drop an image onto the  page, be sure to choose the smallest image available in order to serve a smaller image file. This will make loading these images that much easier on mobile devices.

As long as your theme is properly coded, WordPress should serve a version of your image that most appropriately fits the gien device. In theory, if you load your website on a mobile device, WordPress will serve a small image rather than the larger image needed for a laptop or desktop monitor.

  • There are a variety of ways to optimize your images:
  • Optimize the image through a program such as Photoshop or Pixlr.com
  • Use a task runner like Gulp or Grunt
  • Use a website like Tinypng.com, Tinyjpg.com to manually optmize each image
  • Convert bulky PDF files to more reasonable JPEGS at https://smallpdf.com/
  • Or use a plugin such as Smush.it, EWWW, Imsanity, or Tiny Jpg & Png.

However you choose to do it, please optimize your images for the sake of mobile data plans. Mobile traffic makes up ~56% of search traffic these days, so Google does take notice of websites that do not conform to this new frontier.

Check back for my future post on Image Optimization.

Fonts

After installing Better WordPress Minify and using the Google Webfont Loader I checked Pagespeed and was surprised by a stunning 70/100 mobile and 86/100 Desktop. Not bad! The issue with custom web fonts is that they need to be loaded from either an external domain or they need to be hosted on your own server. The difference it that a hosted web font is able to be downloaded from a server that is theoretically closer to your location, resulting is a shorter response time. Unfortunately, you cannot set the cache headers for a resource hosted elsewhere.

On the flip side, if it is a popular font then the user may have already downloaded a copy of it from when they visited another site that also uses the font. The benefit of hosting your font on your web server is that you can cache the font. If you use a CDN, you may be able to also server this resource in a ‘hosted fashion’. This is all debatable.

One major issue with hosted fonts is what they call the FOUT, or ‘Flash of Unstyled Text’. This happens because the text is rendered earlier in the page load than the external font stylings. So for a split second the user sees the unstyled text, this lends itself to a poor user experience.

It isn’t possible to avoid this if you are requesting the style from an outside domain. Another issue is that the font requests can stop the page load until the styles are downloaded. This is also bad because it delays the page render. By using the Google Webfont Loader, we can asynchronously delay the download of these fonts till after the initial page render. This greatly improves your load times.

Suggested Plugins

I highly recommend the following plugins:

Caching

W3 Total Cache

MinQueue

BWP

Image Optimization

Smush.it

Compress JPEG & PNG

EWWW Image Optimizer

Imsanity


In summary

It is important to optimize your website so it loads in under 3 seconds, Google even accounts for it as a ranking factor. Reaching a Google Page Speed of 100 can be a fun activity, but do not let it govern what you spend your time on. There are lots of small factors that make up these rankings and sometimes it may be preferrable to have a feature that doesn’t quite fall under a proper page speed dictation in order to give that feature to your users. We create websites for people, not robots, so if your user experience is great then a 100 on Google Page Speed may be a wasted effort, especially when any number of changes to your website can cause that ranking to inadvertantly drop. Focus on limiting calls in the above the fold content and optimizing your images, these two things are the foundation of a well optimized site.

One-Page Theme | Prerequisites

Setting up WordPress & Underscores on a Local Environment

Before we begin getting into our theme build we should first go over a few prerequisites, namely:

Setting up a local environment

Downloading and setting up WordPress

Downloading and understanding the starter theme ‘Underscores’

Installing and setting up Bootstrap

Let’s get started.


Setting up a local environment

Depending on which platform you are using there are platform specific local environments purpose built for your operating system. A local environment, or localhost, is a virtual server hosted on your laptop or pc. You can adjust many server settings as you would on a ‘hosted’ server, one that is hosted outside your computer. The following local environments also give you access to phpmyadmin and cpanel. Let’s take a look.


WAMP

WAMP is a great option for Windows users, from their site:

WampServer is a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database. Alongside, PhpMyAdmin allows you to manage easily your databases.

You can download a copy here http://www.wampserver.com/en/


MAMP

MAMP, with an ‘M’, is a great option for Mac users, and is also available for Windows. From their site:

MAMP installs a local server environment in a matter of seconds on your computer. It comes free of charge, and is easily installed. MAMP will not compromise any existing Apache installation already running on your system. You can install Apache, PHP and MySQL without starting a script or having to change any configuration files! Furthermore, if MAMP is no longer needed, just delete the MAMP folder and everything returns to its original state (i.e. MAMP does not modify any of the “normal” system).

You can download a copy here https://www.mamp.info/en/


However you choose to go about this is up to you. There are many local environment packages out there, but for the purpose of simplicity I will be showing you how to set up a WordPress installation on WAMP. The two packages I listed should be similar and there are plenty of in-depth tutorials for setting up WordPress on MAMP.

What do you know? Here’s one right here: http://www.wpbeginner.com/wp-tutorials/how-to-install-wordpress-locally-on-mac-using-mamp/

Setting up the local environment

Go to WAMP’s webpage and click on Start using WampServer. This will redirect you, choose either ’32x’ or ’64x’. Typically, if your computer uses over four gigs of ram you are running a 64x version of Windows. Once you click your version, look for the ‘download directly’ link and click that. Wait till the download is finished, then run the WAMP server .exe file. When you complete the installation you will see a folder on your C: drive called wamp which has a subdirectory called www, it is inside this ‘www’ folder that you will create your project folders.

Now that WAMP is set up you will need to activate it. You should see a pink wampserver-logo icon either in your start menu, on your desktop, or in your system tray. Click this icon to launch your WAMP server.

Whenever you wish to access something on your local environment you can do so by typing ‘localhost/yourfilename‘ into a browser address bar.

Setting up WordPress on WAMP

Now navigate to https://wordpress.org/download/. Click the blue ‘Download WordPress’ link, then download it to your ‘www’ folder for ease of access. Extract the contents into the ‘www’ folder then rename the extracted ‘wordpress’ folder to ‘One Page Site’ or whatever you choose. For instance, I named mine demosite. Your file structure should be as follows: C:/wamp/www/demosite and inside demosite should be the wordpress files.

Now, navigate down to your system tray and click on your WAMP icon (it should be green, if it is not then please launch your WAMP server), then click on phpmyadmin.
 
wampserver

Inside phpmyadmin, click the Databases tab, name your database onepagetheme or something similar and then click create. That’s it for setting up the database!

Now in your address bar, type in ‘localhost/yourfoldername‘. You should be presented with a welcome screen:

wordpress_setup1

Click through this screen and the following screen till you reach the screen depicted below.
 
wordpress_setup2
 
Fill in the credentials as I did, but instead write in your database name for the first field, ‘root’ for the Username, and ‘localhost’ for the Database Host. Leave the password field blank and the Table Prefix set to wp_.
 
Click submit.
 
If you reach an error page then click back, this means you input the wrong information into the fields, double check that the database name is correct and that you copied my field values. If you received the following,

All right, sparky! You’ve made it through this part of the installation. WordPress can now communicate with your database. If you are ready, time now to…

then you have successfully connected the database to your WordPress installaion. Click ‘Run the install’.

 

Download & Setup Underscores

Navigate to Underscores’ website at http://underscores.me/. Underscores is a theme developed by Automattic, the company behind WordPress. This starter theme lays the basic foundation of a theme. It is a great tool for building out your own custom theme because it provides a lot of the structure that can aid you in understanding what a theme should look like.

Type in a name for your theme then click ‘generate’. A download window will open up, navigate to your WordPress installation and then go to the themes file, i.e: C:\wamp\www\demosite\wp-content\themes. Download your underscores theme into this file.

Now, if you open up your WordPress installation at ‘localhost/yourfoldername/wp-admin’ you can login with the credentials you created after you ran the WordPress installer. Navigate to Appearance > Themes. Here you should see your theme, activate it now and then preview your site. Pretty basic right? Exactly, this is a starter theme so it will have basic styling.

Once the existential dread of having to style a whole website begins to fade we can turn to our toolbox and really start developing. In this project we will use a great CSS framework called Bootstrap. This CSS library will help us with a lot of the basic styling we will need.

Adding Bootstrap to our project

In order to use Bootstrap you can either download its directory to your project folder or link to its CDN found here: https://www.bootstrapcdn.com/

We will strive to follow the WordPress Way by enqueuing this file in our functions.php file. Enqueuing is WordPress’ way of lining up files so they can be downloaded most efficiently.

Open up your functions.php file in the text editor of your choice, I personally use Sublime Text.

Enqueuing in WordPress

[php]
function psd2wp_scripts() {
wp_enqueue_style( ‘bootstrap’, ‘//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css’ );

wp_enqueue_style( ‘psd2wp-style’, get_stylesheet_uri() );

wp_enqueue_style( ‘jquery-ui’, ‘https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css’ , ‘1.11.4’);

wp_enqueue_script(‘jquery’);

wp_enqueue_script( ‘jquery-easing’, get_template_directory_uri() . ‘/scrolling-nav/js/jquery.easing.min.js’, array(), true );
wp_enqueue_script( ‘bootstrap-js’, get_template_directory_uri() . ‘/dist/js/bootstrap.min.js’, array(), true );

wp_enqueue_script( ‘psd2wp-skip-link-focus-fix’, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js’, array(), ‘20151215’, true );
wp_enqueue_script( ‘scrolling-nav’, get_template_directory_uri() . ‘/scrolling-nav/js/scrolling-nav.js’, array(), true );
wp_enqueue_script( ‘theme’, get_template_directory_uri() . ‘/js/theme.js’, array(), true );

if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
wp_enqueue_script( ‘comment-reply’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘psd2wp_scripts’ );
[/php]

What happens here is we create a function called yourthemename_scripts. In this function we will have a number of arrays that will take a couple parameters. The first parameter is a ‘handle’ that describes the link, next is the link location, and following that is an array that will list any dependencies i.e if the script needs jQuery to be loaded in order to work. Following that is the version number and a parameter for whether the script should be loaded in the footer or not, this is either true or false.

Copy the code above and adjust it to your needs. You will notice in your functions.php file that a lot of the Underscores scripts are already loaded. Most importantly, the Underscores style sheet is the stylesheet found in the root of your WordPress installation, this is the main stylesheet. This stylehsheet must come last in order to overrule any framework CSS.

Now that we have this added to our functions.php file we can save the file and view our webpage. If we did this correctly you should notice that any basic elements should have styling from Bootstrap.


Now that we have our local testing environment up and running we can move onto coding our theme. Check out Part One here.

One-Page Theme | Part One

How to create a one-page theme for WordPress


Update: I have recently changed the WP_Query function featured in this posting. The original function would query pages by specific names, i.e “Masthead” or “Start”. This proved to be inflexible, and in practice provided a poor user experience. For instance, if a user wanted to label their pages more semantically, they couldn’t. This was because any page that did not use one of the correct content-page endings, such as “Masthead” or “Start”, would not be styled correctly. The answer was to change these required names into categories and then query the pages by category, this way the user can name the page anything they like as long as they select the correct category for the page. See below for an indepth look.


One-page themes are very popular. Whether they employ exciting animations or parallax scrolling, they are a unique way to present information on the web. A one-page theme is fairly simple in theory, it is an HTML file with multiple sections. Usually, a one-page theme employs a navigation bar that jumps the user further along down the page using anchor links.

But as simple as this process seems it begins to get a bit more complicated when we wish to hand over control of the content to an end-user. The beauty of WordPress is the ability to give novice end-users control over a dynamic website. Our aim for this project is to avoid hardcoding functionality as much as possible so an end-user can maintain the content, design, and functionality as they desire.

How does a one-page theme work in WordPress?

WordPress is a great CMS because it allows for people with very little coding experience to maintain and run a website. It does this by using a text editor, widgets, featured images, galleries, custom post types, and a variety of other tools. Our goal with this theme build is to utilize these tools to assist our end user when they use our theme.

Planning a theme

Before we go further!


Run over to BlazRobar.com and download a copy of his free PSD “Take”, we will base our build off of this design. Click here!

If you can visualize it, you can build it.

First, we need to visualize what our average user will want to do with the theme. They will probably want to:

  • Edit each section’s content
  • Edit the ‘hero’ images
  • Add and edit widgets
  • Customize background images, colors and fonts

In order to achieve these objectives, we will need to create a page that has multiple editors, along with multiple featured images, and areas for widgets. In WordPress, a page can only have one section of content that is created by the editor. In a standard page we would usually output this information with:

<?php the_content(); ?>

This function outputs the content of the current page in the Loop. Because we want multiple sections, each with its own unique content section, we will have to combine multiple pages together into one long page. Each page will serve as its own section and provide its own editor and be output by our function the_content().

One-page-site.php and The Loop

First, we will build a template called one-page-site.php. This page will serve as the ‘base’ page for our one-page scroller. Every other page we create will be pulled onto one-page-site.php via a custom query in The Loop.

WordPress uses a piece of code called the Loop. It’s responsible for querying your posts and pulling them onto a page based on specified criteria.

In our site, the Loop will ask if we have posts, then, while we have posts the Loop will post the_post.

<?php while(have_posts() ) : the_post(); ?>

What the Loop asks for is called a query, and we can query many different things by using the WP_Query() function.

WP_Query is a WordPress function that allows us to specify certain arguments for the Loop. By default, the Loop will loop in any posts. In our case, we would like to loop in specific pages (pages are confusingly considered a post-type but let’s put that aside for now). Using WP_Query we can create an array of arguments that will instruct the loop to select all pages with specific categories, list them in a specific order and to make sure that order starts from lowest to highest, i.e. ascending order.

Take a look at the code:

[php]
<?php $args = array( ‘post_type’ => ‘page’,
‘order’ => ‘ASC’,
‘orderby’ => ‘menu_order’,
‘category_name’ => ‘masthead, start, full-image, three-col-grid, subscribe options, contact’
);
$the_query = new WP_Query($args);

?>

<?php while($the_query->have_posts() ) : $the_query->the_post(); ?>

<?php endwhile; ?>
[/php]

Now that we have a loop that will pull in our pages we can create our template. This project utilizes Underscores, a WordPress starter theme. This theme provides a couple different template files that work right out of the box. We will bring up the page.php file and delete the content between the main tags. Here, we will nest our code inside of a bootstrap container-fluid tag. Take a look:

[php]<?php /** * Template Name: One Page Site */ get_header(); ?>

<div id="primary" class="content-area container-fluid">
<main id="main" class="site-main" role="main">

<div class="row">

<div class="col-sm-12">
<?php $args = array( ‘post_type’ => ‘page’,
‘order’ => ‘ASC’,
‘orderby’ => ‘menu_order’,
‘category_name’ => ‘masthead, start, full-image, three-col-grid, subscribe options, contact’
);
$the_query = new WP_Query($args);

?>

<?php while($the_query->have_posts() ) : $the_query->the_post(); ?>

<?php endwhile; ?>

</div>

<!–end post column–>
</div>

</main><!– #main –>
</div>

<!– #primary –>

<?php get_footer(); ?>
[/php]

The commented section at the top /*** Template Name: One Page Site*/ is how we declare to WordPress that this page is a template file.

Save this file to the root directory of your theme and call it one-page-theme.php. Now, we will go into our WordPress dashboard and create a page called home. This page will not have any content, you can also go ahead and set the template to One Page Site. Publish this page and then click on Settings > Reading in the left hand column of your dashboard. Here, set the Front page displays to a static page and set the ‘front page’ option to the page we just created titled ‘home’. You can ignore the posts page dropdown. Click save.

Content & Categories

At this point, we have a page template called one-page-site.php. This template runs a loop that utilizes the WP_Query() function in order to query pages that are a part of the categories: masthead, start, full-image, three-col-grid, subscribe-options, and contact (we will create these categories further down the page).

Let’s create our pages. Based on our PSD file we will have six sections. In our theme each section is technically its own page. Go ahead and create these pages in the WordPress dashboard. The pages can be called:

  • Masthead
  • Start
  • Full Image
  • Three Col Grid
  • Subscribe Options
  • Contact

But any name will do, just be sure that they properly describe the section.

Create them and give them some filler text, you can use this basic lorem text:
Lorem ipsum dolor sit amet, falli instructior te sit, no sit fastidii fabellas urbanitas. Eum et veri conclusionemque, duo an unum feugiat legimus. Ea virtute indoctum iracundia eum, mea denique epicurei cu. Mei harum delenit petentium et, verear placerat scribentur mel at. Sit in legere antiopam, nec utamur theophrastus an. Qui an dolor vocent option, consul graece impetus has an.

Make sure to publish each page.

Now we need to assign each page to a specific category. By default, pages cannot use categories or tags. But by editing our functions.php file we can create this functionality.

Go ahead and open your functions.php file and add the following code to the bottom before the closing ?> tag:

[php]
/**
*Add categories and tags to pages
*/
function add_taxonomies_to_pages() {
register_taxonomy_for_object_type( ‘post_tag’, ‘page’ );
register_taxonomy_for_object_type( ‘category’, ‘page’ );
}
add_action( ‘init’, ‘add_taxonomies_to_pages’ );
if ( ! is_admin() ) {
add_action( ‘pre_get_posts’, ‘category_and_tag_archives’ );

}
function category_and_tag_archives( $wp_query ) {
$my_post_array = array(‘post’,’page’);

if ( $wp_query->get( ‘category_name’ ) || $wp_query->get( ‘cat’ ) )
$wp_query->set( ‘post_type’, $my_post_array );

if ( $wp_query->get( ‘tag’ ) )
$wp_query->set( ‘post_type’, $my_post_array );
}
[/php]

This code registers categories and tags for pages. Then it modifies our WP_Query so when Wp_Query asks for a category it retrieves the page category.

Save this file and hover over the Page section in your dashboard. In the slide-out menu click on Categories. Here you will enter in the categories: masthead, start, full-image, three-col-grid, subscribe-options, and contact.

Click save.

Now, go to your Pages section of the dashboard and click each page and assign each with a different category. Also, apply the follow orders to each page: masthead[1], start[2], full-image[3], three-col-grid[4], subscribe-options[5], and contact[6].

one-page1

As you can see, the name of the page can be anything you like but the category needs to match the intended section. This example page is intended to be the ‘Masthead’ at the top of the page. We can name it anything we like, but by setting the category to ‘Masthead’ it will use the content-masthead.php template which we will discuss in the next post.

Also, note that the Order box is set to ‘1′. This ensures that the Masthead section is the first section to be looped onto the page and will be displayed at the top, this is where order => 'ASC' comes into play.

If you return to your page preview you should see that only the pages in our defined categories should be displaying in the correct order.

Wrap Up

That is all for part one. We have learned how to create a page template and then use the WordPress Loop to query specific parameters with the function WP_Query. We have also set up our functions file so that we can create categories and tags for the pages post type. Using these categories we now can control what pages are outputted to the front page and subsequently are included in our one-page theme.

Coming up, we will discuss how to modify the HTML structure of each individual section using content-parts. Here is the code, try to figure out how we would implement this into our files:

[php]
<?php global $post; $slug=$post->post_name;
get_template_part(‘content’, $slug);
// var_dump($slug);
?>
[/php]

PSD to WordPress Theme

How to turn a PSD into a One-Page Theme for WordPress

I always wondered how to create a one page theme. It seemed like an easy endeavour at first but then I started to realize a few features that were important for a one page theme. Sure, anyone could just hard code a long list of sections together and manually edit all of the content, but I wanted something I could give to a client and let them edit the content, y’know, how WordPress is typically used. So my issue became clear. How would I stack together content sections that were all individually editable?

I came to the conclusion that by looping out pages I could create the effect I wanted. Each page would serve as a content-part that would have its own structure and styling. Each page would also have the benefit of utilizing the WYSIWYG editor. But this project I embarked on ended up being multifaceted. As I progressed through the development process I learned a lot about theme development. Here are just a few things I will talk about in my upcoming tutorial:

[bs_well size=”lg”]

[bs_row class=”row”]
[bs_col class=”col-sm-4″]

Very basics of a PSD File

How to setup WordPress on local environment

How to download and setup Underscores starter theme

How to set up functions.php

The ‘post-types’

[/bs_col]
[bs_col class=”col-sm-4″]

How pages and posts work

How to set up a one page base template

How to implement wp_query and pull in pages to the home-page by category

How to pull in page content via “get_template_part()” function

How to use content-pages for section structuring

How to style each section

[/bs_col]
[bs_col class=”col-sm-4″]

How to widgetize sections using widget areas and posts

How to query posts by ID

How to use post or page featured image as the element background

How to make navigation functional

Extra credit: Adding jQuery to increase user experience

[/bs_col]
[/bs_row]

[/bs_well]

The files:

The original PSD file is called “take” and can be downloaded for free here.

If you would like to see the PSD in action check out my demo right here.

 

Keep an eye open for my tutorial!

The tutorial will guide you in creating a one-page-theme from multiple pages and posts. Using WordPress functions we will display all of these separate pages, posts, and widgets in an organized fashion leaving us with a well design theme. The theme will be built from the Underscores starter theme to ensure a solid foundation. Later on in the tutorial we will discuss refactoring our CSS with Sass, compiling CSS and JS files with a task runner such as Grunt, and loading jQuery and other libraries a variety of hosted libraries. Our end goal is to create a theme that not only looks good, but runs amazingly.