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.

Twenty Seventeen

So the new verson of WordPress has arrived. With it came a new theme: Twenty Seventeen. It’s an attempt to combine the (perhaps too) popular “one-pager” with WordPress content-managing.

The theme has many interesting features. One important addition is the .svg icon theme. These days the SVG format becomes more and more important. Twenty Seventeen may be a proof of concept here.

Of course I had to try the theme.  The design style is “big image” or even “big video” if you dare to use that option.

The theme has improved greatly since the beginning in october 2016. The process began on Github. Here a team from Automattic co-worked with the WordPress open source community. 68 participants or more gave input and suggested code.

Git proposals of changes
Git proposals of changes. Here a suggestion for commenting is implemented.

When the theme was ready for the core it moved to Slack. In the end it was integrated in the wordpress-core code.

A web page is dedicated to the development process. Here you can see the mock-ups and follow the general development of the new core theme for WordPress.

The image below is one of the “hi-fi mock-ups” that was used during the development of Twenty Seventeen.

Home

Install WordPress on a Localhost (Linux)

Here’s a recipe that works on Ubuntu & friends:

  1. Unzip the WordPress files.
  2. Prepare a database in PhpMyAdmin. The collation should be utf8.
  3. Edit /etc/apache2/envvars (see below)

How to edit the  /etc/apache2/envvars file

locate lines:

export APACHE_RUN_USER = www-data
export APACHE_RUN_GROUP= www-data

Change this to:

export APACHE_RUN_USER = yourName
export APACHE_RUN_GROUP= yourName

The username should be someone who can read, write and execute the files.