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.
Often onepager menus fail. They work all right on the frontpage. But other pages will not load the page correctly.
Let’s say that we want a link, that should point to this ID deep below on your onepager:
<div id="myId"></div>
On a typical WordPress onepager you may be tempted to link like this:
<a href="#myId"> Somewhere deep below </a>
Or from the menu:
This code will work from your WordPress menu as long as you’re on the same page or post as these IDs. But when you navigate to other pages these links will not work at all. Because the ID myId is not found on the new page.
The cure is simple. Don’t link to internal IDs as above. Use the full path to your website in the WordPress menu, do like this:
Do this with all the IDs on your page. Then the links in your menu will work from pages and posts.
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.
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.
Next semester I will teach Adobe Animate and integrate the animations with WordPress. In this blog I will collect resources and tutorials as a preparation for the next semester’s UX classs for Multimedia Designers.
Tutorials Adobe Animate
“RubberNinja’s” tutorial is an introduction to the basic user interface (UI):
The next tutorial by “TipTut” with almost one hour of basic instruction. This is a good starting point, if you use Adobe Animate for the first time. It’s a quite long video, but you’ll get an idea of the animation workflow.
For those of us who knew Adobe Flash (killed by Steve Jobs a few years before his death): the workflow in Adobe Animate is almost the same.
Next steps:
Export to HTML canvas via Adobe Animate
Create a WordPress costum page
Implement the resulting code in WordPress
Enqueue scripts
Codewise you’ll see that knowledge of JavaScript is an advantage. Probably I’ll have to create some video tutorials about this on my YouTube channel.
The internship will give you experiences from the Multimedia business. In the end you will have to reflect on what you’ve learned in a report. You will get a grade based on these reflections.
“We do not learn from experience… we learn from reflecting on experience.” (John Dewey)
The Internship Length
Your internship will last 10 weeks. If you and the company wish a longer internship you can do it. However, this arrangement is between you and the internship company. Make sure that the company knows that you will need time in order to write the final thesis. After all that’s what will give you the diploma in the end.
The Learning Objectives
What is the deeper purpose with your internship? Figure out what you’re about to learn. Write five learning objectives.
The Logbook
During the internship reflect on what you learn. Try to write a log or diary every day when you get home. The log is a practical tool – even frustrations may be usefull when you write the internship report.
You can make this log in any way you want to, for instance:
Blog
Vlog
WordPress (or another CMS)
Word-file
A good oldfashioned diary
Or similar feel free to experiment
The Report
After the internship you must write a report. This report is graded according to the seveen step scale.
The curriculum will give you an idea of the content and structure for your report. Here is the curriculum. Go to page 10 paragraph 3.6. Here is everything you need to know about the report.
Since you know the structure of the report before the internship begins you could have these bullet points of the curriculum in the back of your mind when you work on your log.
Today I have moved the content from my research blog to Multimusen.dk
From 2016 – 2017 I was the lead WordPress researcher at the Business Academy Aarhus. Since the project “What You Should Know About WordPress” is not active any more I have decided to move all content from the research site to Multimusen.dk.
This installation is fascinating. Like a charm or magic spell.
In the room streams of flowers will emerge from where you stand. Streams of what looks like water will flow around you. The psychedelic experience is hard to catch on photo.
Because it is multimedia: a magic universe of sound, interactions and projections.
The video by Aros below will give an impression. But you have to experience the installation. A video is not the same thing as being in the room.
Tomorrow is the Question is a User Experience. It is far more than a mereprojection on floors and walls.
I’d like to know how the installation was made. In the room before we entered the installation you could see some running computers with graphic cards. Whether they had something to do with the installation I don’t know.
We can only hope that Aros will get and show this installation on a permanent basis.
WordPress is one of your most powerful tools for UX / UI development in your toolbox.
Troy Dean demonstrates an Elementor workflow that you could use for a minimum viable prototype. The landing pages are made in black and white in order to eliminate design considereations such as colors. Of course you can do similar stuff with other page builders, including Gutenberg.
Video by Troy Dean: how to develop a rapid prototype with Elementor in WordPress.
Pros and Cons
Pro: it is fast and easy. Via drag and drop you can create nice landing pages in a few minutes. You can transform your wireframes to a working prototype rapidly.
Con: why not do the same thing in raw HTML / CSS? The editor should be able to save your posts and pages as templates. If not the creation of headers and footers on each landing page is not a permanent working solution.
Conclusion
From a UX point of view the black and white prototype will offer a rapid progress from say sketches and wireframes to a working prototype with focus on intended functionality.
If you want to conduct a UX-test on an intended landing page this method is excellent. But don’t confuse such pages with a finished template in a theme. The prototype is nothing but a nice looking draft.
Since the prototype is easy to make, test and change the method is convincing. If you don’t like Elementor and prefer something else – for instance the new Gutenberg editor – you can adapt Wpelevation’s idea. As long as you’re able to create a fast prototype.
If your editor is able to save such landing pages as templates – so much the better.
Designing the header and footer in a page builder is of cours possible. But is it a good idea? For prototyping probably yes. But in the actual production you’ll have to design a theme with a more permanent header / footer solution.
The next step
At the end of the day you can create fast and working prototypes in this manner. Of course a prototype is not the finished theme. After UX / UI tests the actual development of a theme would – with page templates for the landing pages – be the next logical step.
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.
