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
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 WordPress Workshop

Murat’s WordPress Tutorials

Murat Kilic is one of our fellow senior lecturers at Business Academy Aarhus. He is a WordPress expert, and his video will help new WordPress users in many ways.

On Murat’s </ startlearning > there are plenty of cool guides to WordPress tweaks.

On </ startlearning > you will find Murats videos and tutorials about WordPress tweaks.

Here are a few of Murat’s tutorials:

Install WordPress on UnoEuro

Categories
WordPress Workshop

WP Workshop @ DigiDays 15.11. 2017

Workshop: News in WordPress4.8 – the REST API,

by Per Thykjaer Jensen

Did you know that you can create WordPress pages in  JavaScript? Or that WordPress isn’t limited to just the browser any more? With the REST API you can fetch the content of your blog native on any device.

But what is REST API and how to use it? Find out – visit my workshop at Digidays at the 15th november 2017 at Business Academy Aarhus.

Click an read WordPress in the Classroom.
The workshop is based on my new e-book.

The workshop is of course based on my new book “WordPress in the Classroom” (see page 98). You can download the e-book for free, and even read it online, click here.

 

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