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!

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.