In block based themes you can do most of the designer’s craft in the Dashboard. The themes are very flexible when it comes to layout and options.
However, in Twenty Twenty Two there are only a few options for say headers or the main text. The theme colors are predefined. It would be nice if you could just define some colors of your own.
Now you could ask: why should we define styles in a JSON file, and not in style.css. The answer is this: theme.json will define the options for the content creators in the Dashboard. I the authors should be allowed to change certain colors – then you can define the options here.
So you want to change the theme Twenty Twenty Two‘s colors, gradients and fonts in WordPress? Theme.json is the answer!
theme.json
Such settings are defined in the new file theme.json (i.e. from WordPress 5.9 and on. The file is located in the root of your theme directory. The file extension reveals that this file is formatted as JSON.
A theme like Twenty Twenty Two is shipped with certain fonts, colors and gradients. They are defined in theme.json. And when this is done correctly you can:
Create cool CSS gradients and use them in the theme, e.g. via this tool https://cssgradient.io/.
Define whitespace, sizes and more.
Add a Google Font to your theme
First create either a child theme or simply copy the theme folder, rename it – and give the theme a new name in style.css.
Then go to https://fonts.google.com/ and find a font that will work in your context. Download the font. You’ll get a zip file from Google. Unzip the font file in:
In the folder youll find the file TradeWinds.ttf – we’ll need this information when we edit theme.json.
Add the font in theme.json
Now you can edit theme.json. Under “typography” find the section “fontFamilies”. You can see severalt fonts there. After the last font you can add the informations about your downloaded font:
Excerpt from theme.json – the Google “Trade Winds” font defined.
Now Trade Winds is one of the font options in the Dashboard.
Now save theme.json – and the font should be ready. Now you can use it in the theme styles.
Colors, Gradients &c.
Now you know the drill. In a similar way you can add colors, gradients, whitespace, sized, dropcaps and more. If you read the theme.json file there are many examples – even on how to style the actual blocks in the editor.
In my oppinion Twenty Twenty Two is one of the most flexible themes from WordPress to date. The new ways of full site editing (FSE) and the many options for personalizing the WordPress theme is in fact a new paradigm for the developer community.
With powerful tweaks like this you can create a theme that will follow virtually any styletile or design line. In fact you could argue, that you don’t need more than one theme in the future.
However, that is very unlikely to happen. The WordPress developers are too creative for just one theme 😀
If you want to make a difference as a WordPress developer take the time for a deeper study of the details of theme.json.
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.
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.
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.
First: you have to create or import a dataset with geojson data.
Second: the dataset must be exported as a tile.
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.
Now import the dataset in Mapbox Studio > Datasets.
Modify the dataset if need be.
In the dataset click the blue Export to Tileset button.
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.
Å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
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!
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.
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.
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:
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.
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.
Download the file wp-config.php from your WordPress on your web host.
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.
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.
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).
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.
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?
Install your open source theme via the Dashboard or by uploading a zip file.
Create a folder with the name of your child theme.
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.
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:
In the child theme create a new file.
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
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:
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.
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.
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.
Add the forked repository to your Gitkraken (or whatever Github GUI you’re using).
It’s often convenient to save the local files in your ../wordpress/wp-content/themes/ folder on your localhost.
Pull the files.
Edit a file and save it.
Stage the changes.
Write a commit message.
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: 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 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:
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. 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.
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.
