Categories
Multimedia Design WordPress WordPress Workshop

10 Secrets: add APIs to WordPress without plugins

How to do it

In most cases you can add your own HTML, CSS and scripts to the page or post:

  • Add costum HTML.
  • Add the scripts and styles you need.

1) Google Maps

Find the location. Mark the location with a mouseclick in order to “activate” the marker. Then click on “Copy HTML”.

This is Silicon Valley. Click the share option. Then this dialog will open. Now you can click on one of the markers. It will turn red. Now click copy HTML

Now add a costum HTML block in the editor, and paste the iframe code there:

Probably you’ll have to change some of the iframe settings, such as the width and height. For instance a width of 100% will give nice results.

If you are a lazy coder add a class for your maps in order to get a standard width and height.

Bonustip – style google maps.

2) Open Street Maps

If you don’t want a Google map try the open source alternative OpenStreetMaps. Navigate to the spot on the planet where you need a map. In the menu on he right side of the screen click “Share”. Then select “Add Marker”. Now you can copy the HTML, and add it to your page or post as we did it before.

The campus at the University of Regina. When I visited the university I enjoyed the beautifull view over the Wascana Lake from the library.

Now create a costum HTML block, and add your map.


Vis større kort

If the map is placed to the far left the problem may be your theme. In that case try to sandwich the iframe in p-elements.

<p> <iframe .....></iframe> </p>
Add markers to a Mapbox Map

Shelters and kiosks in Aarhus added as layers after the instructions in the video above. All geolocations were downloaded from Open Data Arhus. (Remember to remove the deprecated “crs”-line from the dataset, then you can import the data).

3) Mapbox

Mapbox is an interesting extension to OpenStreetMap. In Mapbox you can style a map – so that the colors and fonts will match your styletile. Maps are creeated in the Studio. Again you can share maps with an iframe.

In Studio watch your map list. Then click Share. Click on the “Website Embed” button. Again this will give you an iframe, that you can add to your website.

Let’s try to add Mapbox to the post or page. Create a costum HTML block, and see the result.

4) Mapbox with Markers

In Mapbox you can add markers in several ways. This can be done in numerous ways. By script or adding a marker layer in Mapbox Studio.

  1. First: you have to create or import a dataset with geojson data.
  2. Second: the dataset must be exported as a tile.
  3. Third: you can add the tile layer to one of your maps.

Here is a sample – shelters and kiosks near Aarhus with geojson datasets from Open Data Aarhus:

You could add a marker by JavaScript as in this tutorial. If you save the code as an HTML file, you could embed the map via an iframe.

In theory you could add the div with the map, the scripts and the CSS in a custom HTML block in the WordPress editor. However my experiments along these line only resulted in a “partial success“. Yeah the map was visible, but the markers were placed outside the map. That’s why I’d suggest the iframe solution.

If you have suggestions for a solution here please feel free to add them in the comments below.

Experiment – add a dataset in Mapbox

  1. Download the sample Washsington stations here.
  2. Now import the dataset in Mapbox Studio > Datasets.
  3. Modify the dataset if need be.
  4. In the dataset click the blue Export to Tileset button.
  5. In Styles add the dataset as a layer, and modify it – display icons or texts from the dataset on the map.

5) Twitter

Click the kebab next to your profile. Then copy the code to be embedded in a costum html block.

6) Spotify

You can add a playlist from Spotify. Click the three dots and follow the instructions.

7) Instagram and Facebook

Have similar sharing options, however they tend to change according to the whims and fancies of these companies. There are APIs but these days the user experience is uphill. Probably you can find some free widgets.

In the past Snapwidget, Elfsite and Lighthouse were easy to use. Now “everyone has to pay and pay” as in Lou Reeds “Walk on the Wild Side”.

8) YouTube

Sharing videos on WordPress is easy: copy-paste the url to your video. Et voila!

9) Google Calendar

Follow this recipe – as usual add the code to a costum html block.

10) Figma

You can embed Figma prototypes in WordPress. Click the blue share button. Then < > get embed code.

Then copy the code to be embedded, and – yeah again … add a custom HTML block.

Probably you’re able to do something similar if you use XD.

And now by thine own ingenium device your personal solutions with WordPress and other APIs

Now you have seen 10 samples where data from external APIs were presented on pages and posts via costum HTML. What is your favorite embed on web pages? Let us know in the comments below.

Categories
Multimedia Design WordPress WordPress Workshop

Add Fontawesome to WordPress

In this tutorial you’ll learn how to create a plugin that will add Fontawesome to your WordPress. Font awesome is a very large collection of icons for any webpage. Installing Fontawesome is easy. If you link to the CSS in the head section of your webpage, you’re ready to go. But how can we do this on WordPress?

The best solution is a permanent one. More than often you’d want icons from Fontawesome in the menus. You could add the link to Fontawesome in your childtheme. But then you’d have to add it again when you choose a new theme. We need a more permanent solution.

What we need is a plugin.

It is surprisingly easy to create a plugin for WordPress. Here is a step by step guide.

a) Create a directory for the files

First you have to create a directory for your files. The name of the directory is up to your imagination. But try to name your directory so that you know what the theme will do. In this case I choose the name:

fontawesome

b) Create some files

In the directory we need a few files. Create them in your favorite editor:

  • index.php
  • addFontawesome.php

c) index.php

Leave this file blank. The file is used for security reasons. If there is a blank index.php file in the directory, unwanted guests cannot see the content of the directory.

c) addFontawesome.php

This file is the actual plugin. Here we have to define the function that will add fontawesome to the <head> section of the active theme. A plugin will allways begin with a comment. WordPress will use this comment in order to display informations about the plugin in the Dashboard. Here is the comment we need:

<?php
/*
Plugin Name: add Fontawesome
Plugin URI: https://github.com/asathoor/plugins
Description: Will add the CSS for Fontawesome.
Version: 1.0
Author: Per Thykjaer Jensen
Author URI:https://multimusen.dk
Textdomain: Pers2020Child
License: GPLv3
About this version: Minor bug fix.
*/

Then we need a function, that will be able to add CSS to the <head> section of the active theme. Here we will use wp_enqueue_style:

function petj_fontawesome(){
  wp_enqueue_style(
    'petj-fontawesome',     'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css', 
    array(), 
    '6.0.0');
    }

wp_enqueue_style will add some informations about the CSS. In this case the ‘petj-fontawesome’ is the name we give the stylesheet in the system. The long URL

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css

Is the link to a Fontawesome CDN. If you click on the link you’ll see the styles that will be loaded.

array() will add the data as an array.

The numbers ‘6.0.0’ is the version of the script. If you add your own scripts you can give it any suitable number.

The file must end with an add_action. Such an action will execute the function above – and then the CSS will be part of the <head> section in WordPress.

Here is the add_action:

add_action('wp_enqueue_scripts', 'petj_fontawesome' );

The add_action has two parts:

  1. wp_enqueue_scripts is a function that will add styles og scripts to WordPress.
  2. petj_fontawesome is the function we created before. So the functions is invoked and executed. Then the CSS will be part of your WordPress.

d) Prepare your plugin for installation

WordPress can install plugins via zip-files. Compress the directory with the files. Most operative systems have a compress option when you right-click the directory. Then a file called fontawesome.zip is created.

e) Install the plugin

Now go to the Dashboard in WordPress. In Plugins select add plugin. Choose the Upload File option. Follow the instructions on the screen, and remember to activate your new plugin.

f) Use Fontawesome

Now you can use Fontawesome. The icons are added via HTML, like this:

<i class="fa fa-car" style="font-size:60px;color:red;"></i>

If you add code along these lines to a custom HTML block in the WordPress editor – or Elementor, the result will be this:

In the menus you can add the Fontawsome icons in the description. Now you can use the icons from Fontawesome in any theme.

Categories
Adobe Animate Animation API JavaScript Multimedia Design WordPress

Adobe Animate and the OpenWeatherMap API

Part One: Adobe Animate and API

Do you want to fetch data from an API and use the data in your Adobe Animate CC creative work? Animate CC productions are made by JavaScript and HTML canvas. In theory getting data should work.

Let’s try!

OpenWeatherMap

The data from OpenWeatherMap is only available when you have a token. The first step is to create a user profile, and then to create a token. Then you can create the URL to fetch the weathere data.

Above you see the API call. That’s the information we need in order to get data from the website. The data will be returned as JSON, but we can fetch the content and display it in Adobe Animate. You can create the string along these lines:

var weather = 'https://api.openweathermap.org/data/2.5/weather?q=YOUR-CITY-HERE&appid=ADD-YOUR-TOKEN-HERE';

The url will fetch data from the API in the form of JSON. The URL for the weather data is formed in the variable weather.

A JSON object from OpenWeatherMap.

The fetch() function will use the variable above, and that’s how we get the data for the JavaScript into the document:

fetch( weather ).then( ... etc ... );

Dynamic Texts

Now we have the data. Then we want to use the data in the design. Here we will work with Dynamic Text Fields.

Dynamic Text Field.
Here the Dynamic Text Field is selected. In Propterties to the left it is named theCity. Now we can change the content dynamicly with JavaScript.

On the stage you see two Dynamic Textfields called theDescription and theCity. If you want to change the text of these fields you could do it like this:

_this.theCity.text = “Hello World”;

But we need the text from the API. If you check out the content of the weather data in the console, you can see, that the name of the city is:

data.name

The city name is added to the Dynamic Text Fiels like this:

_this.theCity.text = data.name;

If you use the Inspect Tool in the browsesr you will be able to create Dynamic text fields for all the data in the object from OpenWeatherMap.

The JavaScript

In the actions layer you can add your Vanilla Javascript. Here is the script I used:

/**
 * OpenWeatherMap API Demo
 * IMPORTANT
 * Don't use the code beautifier. It will ruin the => in the Js.
 **/

// get this as a global var
var _this = this;

// Openweather API string
var weather = 'https://api.openweathermap.org/data/2.5/weather?q=Aarhus&appid=ADD-YOUR-TOKEN-HERE';

// get the weather data via query URI
fetch(weather).then( response=>{
	
	return response.json();

}).then(data => {

	// JSON data to the console for inspection
	console.log(data);

	// add the weadther description,texts or images to theDescription
	_this.theDescription.text = data.weather[0].description;
	_this.theCity.text = data.name;

}).
catch (err => {
	// Do something for an error here
	console.log('There was an error.');
});

Now you can test the production. Use the inspection tool in order to use the data from the JSON object in Dynamic Text Fields.

So that’s what it takes if you want to create an Adobe Animate production that can display data from OpenWeatherMap’s API. Of course you can work in a similar manner with other API’s and JSON objects.

Display the Weather Forecast in WordPress

In order to show your work in WordPress, you can use an iframe. Upload your production to a folder on your server. Then add am iframe along these lines:

<iframe src="https://yoursite.net/yourFolder/weather.html" height="480" frameborder="0" style="overflow=hidden;"></iframe>

When you upload your work you’ll need the HTML, JavaScript file and the images/ folder – of course with the images in the folder. You don’t need the .fla file, since it’s for production only, but I would recommend to put it there anyway. If you want to change anything, you’ll know where it is.

Resources

Categories
Multimedia Design WordPress WordPress Workshop

E-Alumni Talk: “New Trends in WordPress: 2020 – 2021”

Here are the slides from my E-Alumni talk at Business Academy Aarhus November 4rd 2020

WordPress logo

The Trends

  • A) Trends in CMS usage with focus on WordPress 2020 – 20201.
  • B) Blockbuilders – the situation where Gutenberg is integrated in the WordPress Core.
  • C) Twentytwentyone under deveopment here and now. What can we expect from the next generation of WordPress themes?

The Slides

Here are the slides from my presentation. The live code session happened IRL, but you can get an idea of the code in the sample below.

Sample code

How to create your own Patterns for Gutenberg is a well kept secret. In due time I guess that you’ll be able to create the Patterns via a button. But in the present version of WordPress you’ll have to write some code. Here is a plugin, but you could do something similar in the child theme’s functions.php.

Categories
Multimedia Design 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 Design WordPress

Tutorial: Custom Frontpage with Widgets

It’s on “Jensen’s WordPress Show”

(18 minutes)

WordPress logo

Learn how to create a frontpage where you can edit the content. On top of that you’ll get three – or more – widget areas for your featured content.

Categories
Multimedia Design 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.

We use cookies - is it ok with you+ more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies.

Close