How to Create a WordPress OnePager

Here’s a short and handy tutorial about the Siteorigin PageBuilder. In Pagebuilder each row will get an id. Then each row will get an id in the Pagebuilder settings.

Now the video does not tell this, but I guess that Pagebuilder will set bookmarks on the webpage, as in:

<h2 id="row-about-us">About us ...</h2>

In the WordPress menu the internal links will be used. The menu will link to #row-about-us, and Pagebuilder will create markup somewhat like in this sample:

<a href="#row-about-us">About us</a>

Now onepagers tend to scroll in a cool slow way. You can do this via some JavaScript. I guess there’s a plugin for it too.

Create Your First Underscores Theme

In this tutorial you will learn how to create a WordPress theme almost from scratch via the theme skeleton Underscores.

Download Underscores

  1. Go to http://underscores.me/ and enter the name of your theme in the input box.
  2. Then click enter, and you’ll get a zip with all the theme files in a folder.
  3. Install the theme via the Dashboard in WordPress.

Now you have a very basic theme. There is a menu, but it’s horrible, or so it seems. In fact you’ve got a dropdown menu – so that’s kind of a head start. And that’s the idea of Underscores. From here it’s a matter of styling, but where are the files we need?

 

Style.css

Have a look in the style.css file. Here your theme name and author is defined. Add your name and the URI to the website, or even better to your Github repository. Since you’re working on a home hacked theme, you may do stupid things. So enter your credentials e.g. (see my sample style.css here):

 

Theme Name: Abracadabra
Theme URI: https://github.com/asathoor/underscores-and-sass
Author: Per Thykjaer Jensen and Underscores.me
Author URI: http://multimusen.dk
Description: The 2017/18 theme for WordPress based on Underscores. Features: SASS, Gulp, Bower, Font Awesome, jQuery.
Version: 0.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petj-17
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, responsive, two-columns, custom-header-image


Sidebar – Content or Content – Sidebar

Since Michael Heileman designed the Kubrick theme in 2004 the standard blog design became something like a sandwhich with a header and footer as the buns. Between the header and footer you’d see some content and a sidebar. So the blog designer could choose between content-sidebar or sidebar-content. Of course you don’t have to do this, but the standard WordPress design still use the magick formula: header.php, footer.php, sidebar.php – and a filename. If there are no other files, WordPress will use index.php as a fallback. All of these files are found among the Underscores files.

Underscores made it easy to create a basic design, with content and a sidebar to the right or left of the content.

 

Layouts

In the folder layouts you’ll find two files with the CSS for the basic layout:

  • content-sidebar.css
  • sidebar-content.css

So if you want a classic blog layout, you can copy-paste the content of the one you fancy to style.css. Here is the CSS from content-sidebar.css:

.content-area {
 float: left;
 margin: 0 -25% 0 0;
 width: 100%;
}
.site-main {
 margin: 0 25% 0 0;
}
.site-content .widget-area {
 float: right;
 overflow: hidden;
 width: 25%;
}
.site-footer {
 clear: both;
 width: 100%;
}

Now you have a traditional blog design.

 

Responsive Styles

Of course these styles are not responsive at all. You still have to refine your design with media queries and so on. Since the CSS in media queries are quite redundant a SASS mixin may come in handy (see this sample).

 

@media screen and (min-width: 100px) and (max-width: 760px) {
 @include responsive(); // sidebar to bottom
 body {
 font-size: 123%;
 }
}


Custom Header Image

The Underscores theme does not support a custom header image. Many themes give you this option, so how do you implement the feature? First you have to add this to the functions.php file:

$args = array(
 'flex-width' => true,
 'flex-height' => true,
 'default-image' => get_template_directory_uri() . '/images/clouds.jpg',
);
add_theme_support( 'custom-header', $args );

Then open the header.php file, and add the following where you want the image to appear:

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="">

From now on the user is able to choose his own header images from the media. This short sample also demonstrates, that you can edit any file in the theme.

 

Custom Pages

In WordPress custom pages have to follow a certain naming convention. You can see the system in the template hierarchy.

The template hierarchy
The template hierarchy found on the WordPress Codex.

 

Let’s say that you want a custom design on the front page. In the template hierarchy you can see that the WordPress will look for the frontpage code in the file front-page.php.

I’d like to design my frontpage in Siteorigin’s PageBuilder. So I need a frontpage that does not interfer with Pagebuilder. And I don’t want a headline. A fast head start is to copy a file and use it as a model. Remove what you don’t want. Add what you need. In this case the result was extremely simple:

get_header(); ?>

<div id="primary" class="content-area">
 <main id="main" class="site-main">
 <?php
 // the loop
 while ( have_posts() ) : the_post();
 get_template_part( 'template-parts/content', 'frontpage' );
 
 endwhile; // End of the loop.
 ?>

</main><!-- #main -->
 </div><!-- #primary -->

<?php
//get_sidebar();
get_footer();

The loop will get template parts from the file ../template-parts/content-frontpage.php. Here is the loop part for the full width PageBuilder content:

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php the_content(); ?>
 </article><!-- #post-<?php the_ID(); ?> -->

This part of the loop will print the content, but not the headline. If you want the headline feel free to add the_header() and similar loop tags (see this article).

It’s a Theme

With Underscores you’ll learn what it takes to create a WordPress theme almost from scratch. Underscores is the basis of many themes – among them the core WordPress theme Twenty Eleven.

Create a Stunning Portfolio with WordPress

Multimusen's costum front-page.php
Multimusen’s costum front-page.php (september 2017). The layers are animated by a parallax script.

For multimedia designer an online portfolio is a must. The industry expect you to have one. But what if you have found a nice open source theme, but you need a really stunning front page? Or a costum gallery for your productions? Or a kick ass CV?

Step 1) Create a Child Theme

The code presented in this tutorial is based on my tw17child. The child theme is based on the Twenty Seventeen theme. The code is available on Github.

  1. Install your open source theme via the Dashboard or by uploading a zip file.
  2. Create a folder with the name of your child theme.
  3. Then create a new file in the folder. Name the file style.css:
/*
Theme Name:   Twenty Seventeen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Seventeen Child Theme
Author:       Per Thykjær Jensen
Author URI:   http://multimusen.dk
Template:     twentyseventeen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain:  tw17child
*/

As soon as the style.css is ready you’ll be able to see the child theme in the Dashboard. But the styles are not loaded. In WordPress styles and scripts are loaded via the enqueue function in functions.php.

  1. Create a new empty file. Save it as functions.php.
  2. Add styles by enqueue:
/**
* Styles: both parent and child
*/
function my_theme_enqueue_styles() {
  $parent_style = 'parent-style';

  wp_enqueue_style( $parent_style,
  get_template_directory_uri()
  . '/style.css' );
  wp_enqueue_style( 'child-style',
  get_stylesheet_directory_uri() . '/style.css',
  array( $parent_style ),
  wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

You can add more scripts and stylesheets to this function if you want to after a similar manner.

That’s it! Your child theme is ready. Now it’s time for your creative tweaks.

 

Step 2) Create Costum Content

Let’s say that you want a costum frontpage:

  1. In the child theme create a new file.
  2. Save the file as front-page.php

Add some content to the page, e.g.

<h1>Hello World</h1>

OK, I admit that this is not the most stunning design, you’ve ever laid your eyes upen. But have a look at your frontpage. It’ll display a “Hello World” as expected. You did not use one line of PHP or WordPress template tags. There’s no loop either.

“What can you deduce from this, Sherlock?”

“The game’s afoot, Watson!”

Actually you can add any code you fancy. You don’t need to follow any restrictions made by the original theme. Now you are able to hardcode a cool splash for your website. If you want to, you can add wp_head() and wp_footer() in the code, e.g.

<?php wp_head(); ?>
</head>

If you do so WordPress will enable the admin bar and add the WordPress head and footer scritpts and styles from the theme.

Step 3) How to name the files

The template hierarchy

Actually you can modify any page or post after a similar manner. The secret is naming your costum files correctly, and here the template hierarchy diagram is the key we need. In the diagram you can find the front-page.php. Here are a few samples:

  • A page for categories: category.php
  • Costum design for a category with the slug icecream: category-icecream.php
  • A post with the slug whatever: page-whatever.php

If you don’t add a loop to the page, you can only use hardcoded content on your costum pages.

Sometimes that’s exactly what we need.

Now you’re able to create a bunch of very personal costum pages for your content, such as:

  • Galleries
  • Animations
  • CV
  • Portfolio pages
  • Costum author pages

 

 

 

How to use the theme skeleton

Skeleton and implemantation
Finished version with costum frontpage (top) and the skeleton boilerplate (bottom).

In this tutorial you’ll learn how to create your own version of a skeleton theme.

The “Skeleton-F16-Bootstrap” theme for WordPress is a boilerplate, or a place to start, if you want to create a Bootstrap theme from scratch. Or almost scratch that is. The basic files are ready. The top picture is a variant of the theme. The picture on the bottom is what it looks like, if you download the theme as is.

Here are the two versions:

How to fork the code

In order to get started it’s convenient to have your own version of the code. Create a github profile, if you don’t have one yet.

  1. Log in on Github.
  2. Then navigate to the Skeleton-F16-Bootstrap.
  3. Fork the repository.

On your Github page, you’ll find the fork, that is a copy of the original repository. You’ll be able to edit files and upload your own versions of the files. In this way the repository is a starting point for your new coding adventure.

The fork symbol
In order to create a fork click on the fork symbol. Here it’s marked with a fancy red circle.

When you click the fork symbol a new repository is created on your Github space. You can edit all files as you fancy.

  1. Add the forked repository to your Gitkraken (or whatever Github GUI you’re using).
  2. It’s often convenient to save the local files in your  ../wordpress/wp-content/themes/ folder on your localhost.
  3. Pull the files.
  4. Edit a file and save it.
  5. Stage the changes.
  6. Write a commit message.
  7. Push to the repository.

On your own

From this point you’ll be able to create your own markup. If you want to have 6 columns in stead of 3 on large screeen you can fix the Bootstrap / HTML markup. Bootstrap and Jquery will work out of the box. So you can add carousels, accordions and other fancy Bootstrap og Jquery stuff as you please. Since you’re in charge of the markup, you can even create hardcoded menus. You don’t have to do everything in the WordPress way.

The costum CSS editor is enabled in the plugin. You can experiment with styles in the editor. As soon as you’re satisfied with the styling, you can add the styles to style.css.

Costum CSS
Costum CSS: here the text describing an image is changed from centered to left. The font-size is changed too.

The sample code has several branches. The origin master is the actual skeleton. The branch called Multimusen was developed as an implementation of the skeleton for my website Multimusen. Multimusen’s branch has several costum pages, such as pages for categories, or special designed pages like a CV or similar. In this case the CV should stand apart from other pages. The focus should be on the text, so asides such as the sidebar are removed. The markup and PHP for the costum page is found in page-cv.php. I guess that you don’t need a page exactly like this. But if you need one, you can create your own costum templates. Just copy a page template that’s similar. Edit the code, and name the file page-SLUG.php.

In WordPress costum files have a name convention. The system is described in detail in the Theme Developer’s handbook.

In fact: whatever you’re able to do with markup, you’ll be able to implement in a theme. So you can have a look at the Bootstrap grid tutorials on W3 Schools, and even add a Jquery theme after your own choice.

If you want to use JavaScript libraries for animation or parallax you can either edit header.php and footer.php or add scripts via functions.php (don’t do both options!). Adding scripts via functions.php may seem a bit abstract. But it is the best practise.

Here are a few libraries, that’ll add immersive experiences to your WordPress theme:

Whatever you’re able to do with HTML, CSS, JavaScript and libraries – the same is possible in a WordPress theme.

Proceed, and experiment according to your creative vision.

WordPress and REST API

The newest version of WordPress came with a REST API. It will revolutionize the ways we think about themes. You don’t have to use PHP any more. With HTML, CSS and JavaScript you can get content via Json.

What is REST API?

The very short version is: WordPress will return Json objects from certain endpoints. Here’s a sample:

yourWordPressSite.nu/wp-json/wp/v2/posts

A URL like this will return a Json object with the 10 most recent post. Why don’t you try it in your browser:

http://multimusen.dk/wp-json/wp/v2/posts

But what’s the fuzz all about? Well JavaScript can transmute Json to content on a web page. So now you may program your frontend via JavaScript. This is really good news for Nodejs-developers. But in fact you may develop your web page in any language, that’s able to manipulate Json.

REST API is much more that reading content. You can create, read, update and delete content on the server.

 

With the REST API WordPress will open the gates to a very interesting future. Perhaps themes as we know them will be obsolete in the near future. Even the Dashboard could be something in the past.

Bang the drums, and hoist the flags! WordPress  with REST API is here.