Categories
Multimedia Deign WordPress WordPress Workshop

A Sandbox for WordPress

One line of code. That’s all you need in order to get your sandbox. Developers often need a place where the can experiment with design ideas or Minimal Viable Productions. This tutorial will show you how to do this.

  1. Download WordPress from https://wordpress.org/download/
  2. Unzip the files.
  3. Delete the file wp-config-sample.php
  4. Download the file wp-config.php from your WordPress on your web host.
  5. Edit wp-config.php in your favorite editor.

If you have WordPress up and running the settings in wp-config.php will be almost the same. But you have to change one line of code, if you want to run more than one WordPress installation on your web host.

wp-config.php

Find this line:

$table_prefix = 'wp_'; 

// change this line to:

$table_prefix = 'sandbox_';

If you need more WordPress on your web host, just change the table prefix every time.

More about edition the wp-config read this page.

Categories
Multimedia Deign WordPress

WordPress Guide

WP: Fall 2020

Here is a guide to WordPress 5.5. This version is just released by WordPress (august 2020). We have a brand new block editor with exciting features.

WordPress

What’s new in WordPress 5.5?

By now WordPress is skipped with a fantasctic block editor. Some even predict that the days of mighty Elementor and other competing block editors are counted. You don’t need a plugin in order to create fantastic content. Now WP is faster and more easy to use than ever before. Creating content isn’t harder than using Libre Office.

WordPress will load faster, and images will load “lazy”. Here is a guide to WordPress with tutorials ranging from installation of WordPress on your web host to advanced features on costum made pages – and themes. If you know your HTML and CSS knowledge about a content managing system is the next logical step.

Advanced Tweaks

If you want to tweak a theme and create some advanced stuff that the theme was not meant for you still may to do this in either PHP or use JavaScript with the WordPress REST API. If something is possible in HTML then you can certainly do it in WordPress. That is if you know how to.

Tutorials

Below you will find my WordPress 5.5 for Multimedia designers.

Install WordPress

If you don’t have WordPress on your webhost yet: here is a tutorial. Follow the step by step tutorial and pause the video while you install.

The host I use in the video is One.com. Of course this is only a sample.

Since I use One.com there is a discount offer for you here (and the discount will give me a similar discount too so you will support Multimusen too).

You can follow the steps on other hosts too. So if your website is on say Unoeuro or something else – just follow the steps of the tutorial.

Jensen’s WordPress Show: Follow the new trends on WordPress

Jensen’s WordPress Show

Here is Per’s new WordPress channel on YouTube where you will find more and more videos about WordPress. If you follow my channel you’ll know about the latest trends right away.

Create a Post

JavaScript in Gutenberg

Multimedia designer often add interactive UX elements such as small animations via JavaScript.Use the custom HTML block element. Add your script like this:

You have to use window.onload = function( ){ } in order to check that all elements are loaded. Just add whatever scripts you have inside that function. If you use document.getElementById without the window.onload your script will not work.

The Child Theme

Why use Child Themes?

Use a child theme if you want to tweak the theme with your own code or stylesheets. If you change the code in a theme and update to a new version your changes are lost. The changes you make in a child theme are your own.

Create a Child Theme

Here is a quick guide to child themes. First you have to create a child theme. Follow the steps in thies tutorial.

Add Widgets to Your Child Theme Frontpage

If you choose a static frontpage for WordPress your theme will use the template file front-page.php. In the next tutorial I will add a few wdget areas to the frontpage.

A Living Document

Per’s guide to WordPress 5.5 is a living document. During the fall of 2020 I will add more tutorials from my WordPress classes at the Business Academy Aarhus to this page. Eventually you will find tutorials about:

  • Themes
  • Child themes
  • Costum pages
  • Recommended Plugins
  • SEO
  • WordPress Securitu

Have fun: Code is Poetry.

More About WordPress

Did you know: There are more than 50 articles in the WordPress category on Multimusen.dk.

Categories
Multimedia Deign Portfolio WordPress

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:   https://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

 

 

 

Categories
MMD2 WordPress

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.

Categories
Multimedia Deign WordPress

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

Categories
Multimedia Deign WordPress

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.

Categories
MMD2 Multimedia Deign WordPress

Create a WordPress Plugin

In this tutorial you will learn how to create a WordPress plugin that will get data from the WordPress database – or other tables residing in the same database.

As a starter here’s a video from the “Tips and Tricks HQ”. See the full blog post here. The tutorial will add a new tool in the Dashboard.