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.

HTML Kickstart og PHP

HTML Kickstart wireframe
HTML Kickstart wireframe

HTML Kickstart (http://99lime.com) giver et framework til hurtig udvikling af html. Siderne kan konverteres til .php sådan:

  • Gem din fil som minfil.php
  • Herefter kan kode genbruges ved includes.

Det kan være en god ide at lave en skitse over din side, således at du får en ide om, hvad du vil udvikle.

Husk at en række = 12 kolonner.

PHP: Cookie, Array, Loop

A cookie is saved locally. Therefore different browsers will display whatever the user has saved. At least as long as the cookie is alive.
A cookie is saved locally. Therefore different browsers will display whatever the user has saved. At least as long as the cookie is “alive”.

The complete code to this article is available here.

We use cookies in order to save information about or from the user input. If you compare my Firefox and Chrome browsers they will format the Microlite roleplaying web page according to random values, dates and saved input. Computergames use random values in stead of dice. First the character is saved in an associative array.

// ASSOCIATIVE ARRAY
// Define the character array.
// “key” => value
$character = array(
“strength” => rand(3,18),
“dexterity” => rand(3,18),
“mind” => rand(3,18),
“charisma” => rand(3,18),
“class” => $class[rand(0, $classes)],
“race” => $race[rand(0, $races)],
“address” => “Shire”,
“hitpoints” => rand(3,18),
“level” => 1,
);

Above you see the method in action. rand(3,18) is an imitation of the role playing “3d6” (throw 3 sixsided dices). The random generator will give a value between 3 and 18. If you read the rules of Microlite 84 it’s easy to add more character properties.

The cookie

In this case we’ll save the character data in a cookie in the client browser. However a cookie can only store a string. PHP can convert an array to a string:

$toCookie = serialize($character);

Now we can save the data in a cookie via setcookie:

setcookie(“character”, $toCookie, time()+ (60 * 60 * 60 * 24));

After the cookie has been set PHP can use the data. That is next time the page is read. PHP can check whether the cookie exists by isset($var):

if(isset( $_COOKIE[“character”] ) ) {

$charUnSer = unserialize($_COOKIE[“character”]); 

}

This will convert the cookie string to an array.

The Loop

In order to echo or print the values of the array to a table:

foreach ($charUnSer as $key => $value)
{
print ”
<tr>
<td> $key </td> <td> $value </td>
</tr>
“;
}

And this loop will then create the character table in the wbbage.

Principles of PHP

Here is a very short introduction to the principles of PHP.  PHP is an acronym for “hypertext preprocessor”. PHP is a serverside language. We use PHP in order to prepare webpages, react to user input – and (on the third semester) to interact with databases.

Many Open Source CMSs use a combination of Apache, PHP and MySQL as an “engine”.

How to write PHP code

A php file is made in a manner similar to a HTML file. You create a file and give it the surname .php. So a file name sample could be:

  • myFile.php

The file can contain other forms of code and tags such as JavaScript, CSS or HTML. In the file the php code is nested between a <? and ends with a ?>.

Variables, Strings and numbers

<?php
$a = 10; // a number
$b = “Hello World”; // a string
$c = “Ho, ho, hooo!”; // yes it’s another string
$d = “Santa Claus, says: “; // xmas is near
$combinedStrings = $d . $c; // Santa Claus, says: Ho, ho, hooo!
$e = NULL; // no value set
$f = true; // or false
?>

A variable is defined via the $ character. In the sample code above you can see several variables.

A string starts and ends with a quotation mark as ” or ‘. If you need quotation marks inside a string they should be nested like this:

<? $foo = “<img src=’image.png’  alt=’an image’ />”; ?>

You can create HTML code via PHP – and you can show an image on a web page like this:

<? echo $foo; ?>

or

<? print(“$foo”); ?>

Numbers

Since a variable can be a number, you can use PHP for calculations, such as:

<?
$x = 1;
$y = 19;
echo $x + $y; // should return 20
?>

See this page for more information about PHP and calculations.

Conditions

Arrays

Loops

Includes

<?
include(“myFile.php”);
require(“myFile.php”);
require_once(“myFile.php”);
?>