Here are a few bug that I’ve discovered during experiments with WP 6.1:
Reusable blocks won’t work if you try to export a theme. Just use regular blocks. Then your theme will work as intended. The theme will break apar.
Custom HTML blocks with JavaScript also don’t work.
However, here is a workaround: Just pick the blocks out of the reusable block. Q.E.D.
In most cases you can add your own HTML, CSS and scripts to the page or post:
Find the location. Mark the location with a mouseclick in order to “activate” the marker. Then click on “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.
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.
Now create a costum HTML block, and add your map.
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>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).
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.
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.
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.
Click the kebab next to your profile. Then copy the code to be embedded in a costum html block.
Åh BLACK FRIDAY. Jeg køber en pakke laktosefri smør. Det mangler i køleskabet. Og nej, jeg er ikke den som står i kø for at spare 20%, som man til enhver tid kan forhandle sig til. #blackfridayRendOgHop
— Per Thykjaer Jensen (@Pertjensen) November 26, 2021
You can add a playlist from Spotify. Click the three dots and follow the instructions.
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”.
Sharing videos on WordPress is easy: copy-paste the url to your video. Et voila!
Follow this recipe – as usual add the code to a costum html block.
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.
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.
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.
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
In the directory we need a few files. Create them in your favorite editor:
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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 </ startlearning > you will find Murats videos and tutorials about WordPress tweaks.
Here are a few of Murat’s tutorials:
Install WordPress on UnoEuro
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.
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 - more information
Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.