I created a WP theme from scratch. Here I followed the fine tutorial by Carolina Nymark.
Here is a cheat sheet with some of the common blocks in Gutenberg.
Category: WordPress
These days WordPress power more than 40% of all web pages. Sooner or later you will have to use a WordPress solution – and want to tweak it. Here are my tips and tricks for advanced WordPress developers.
-
Tutorial: How to Modify a WordPress 6.* Style
In this tutorial you will learn how to modify a WordPress style and save it as your own. As a bonus you will be able to save your entire theme in a Github repository.
This tutorial is based on the most recent standard theme for WordPress (WP): Twenty Twenty Four. However, the principles should work for any block-based WP theme.
Select a relevant style
Select one of the styles in Appearance / Styles. I used Rust for this tutorial. Modify the style
Now you can modify your style. In my case there was a lot of irrelevant information in the header and footer templates. I removed the unwanted informations on the frontpages template too.
You can edit the header and footer in Appearance / Edit / Patterns / Header
How to edit all headers in one go
There is only one header here. This template pattern is used in many places. So if we edit this header, we will edit all headers in the active style.In my case the colors were reversed in the header and footer, so that the background was dark and the text was made in a contrasting color. The links were changed too, since they would disaapear with this new background.
Here you see the header with reversed colors from the theme.
In this case a worked on a local computer, but you could work in a staging environment too. Now when the work with the styling is finished it is possible to export the entire theme and upload it to your webserver.
Export the theme
Under Appearance / Edit / Styles you can click the pen.
Then click the three dots icon found in the top right corner.
The menu to the right should appear.
Now you can export the theme. Click on Export. The file will be downloaded to your Downloads directory on the computer.
Fonts
I have tried to add fonts, but this experiment is only a partial success! You can see the fonts in the editor, and sometimes use the additional fonts with the blocks.
Permanent Marker works fine when my petj_rust style is enabled [this sample will only work as long as I use the petj_RUST style] 😉
However, if I try to add the costum font to a heading, the style is overruled!
Even a custom CSS !important clause is ignored by the theme. Perhaps this is a bug in Twenty Twenty Four?
The Theme Zip
If you open the zip file you’ll see the standard Twenty Twendty Four files. In the styles folder you can see a series of JSON files, one for each of the styles. If you want to have your own styles you can copy the rust.json file and give it a new name, e.g.
aGoodName.json
You can modify the JSON inside the file. A good start is to rename the theme name and add a description in the key value pairs, e.g. like this in your favorite editor:
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"title": "PETJ Rust",
"description": "Multimusen's take on the RUST style.",Save the JSON file, and yo are ready to go.
Tweaking All Styles
You can tweak all the styles in the JSON:
- Colors
- Fonts
- Duotones
- Blocks
But this has been covered in some of my other tutorials. You can even select to block other users from changing the palettes and similar settings.
Then you are ready for the final step in WP.
Read Carolina Nymark’s article about theme.json.
Upload the Theme Files.
Now you can upload the revided theme to WP. Here I’d prefer to upload to the web host via Filezilla. If Twenty Twenty Four is installed, just upload and overwrite the files.
Filezilla in the local directory with Twenty Twnety Four. And pointing to a similar folder in the directory:
wp_content/themes/twentytwentyfour/
The result
Now that’s all it takes to tweak a style. After the upload the theme will look exactly like what you did with the tweaks. Even headers and footers will look like your local version of the WP JSON Style.
Here is the final result, a new styled theme for Multimusen.dk:
Upload the Files to Github
Since the work is done you can upload your new tweaked theme to a github repository. Here is my repo: https://github.com/asathoor/petj-twentytwentyfour
That’s all folks!
The game’s afoot, Watson!
Sherlock Holmes
-
Crash Introduction: Woocommerce REST API
Tutorial: Woocommerce REST API. Woocommerce REST API
Here is a short introduction to the Woocommerce REST API. In the tutorial you will learn how to present a product list from the REST API on any HTML page. If you want to create your own markup that does not depend on the limited Woocommerce blocks in the editor the REST API will open endless possibilities.
Sample Code on Github
The code from the tutorial is available on Github:
Questions and Comments
If you have comments or suggestions for new videos about the subject please let me know in the comments below.
-
Reversed Engineering
Hvordan du kan udvikle en Figma-prototype ved at undersøge mulighederne i WP.
Blokke i Woocommerce
Der findes et meget stort antal blocks i Woocommerce. Denne artikel viser de fleste. Der findes desuden mange plugins og patterns, der giver yderligere muligheder.
Når du skal udvikle et design i WP, så kan “reversed engineering” være en rigtig god ide. Før du designer noget, så må du vide, hvordan de enkelte blocks ser ud og hvilke indstillingsmuligheder der er i dit theme – herunder hvor custom HTML / CSS kan blive nødvendig.
Øvelse
Lav en side, der simpelt hen lister de enkelte blocks, sådan som de ser ud i dit theme.
- Lav en side med samtlige blocks, som du får brug for i dit design.
- Inddel dine designs i groups.
- Gem disse groups som genbrugelige patterns.
Dette er ikke en layout-opgave; men derimod en opgave, der handler om at finde ud, hvordan de enkelte blocks ser ud, således at du kan genskabe dem i Figma.
Reversed engineering handler om at arbejde ud fra det som er kendt. Det er lidt som at designe med Lego-klodser, der jo har en forud defineret form.
Eksempel
Herunder er et eksempel på en liste, der kan bruges til Figma reversed engineering.
Søgning
Håndplukkede varer
Minikurv
Blokgrupper fra Woocommerce
The Fall Collection
With high-quality materials and expert craftsmanship, our products are built to last and exceed your expectations.
Quality Materials
We use only the highest-quality materials in our products, ensuring that they look great and last for years to come.
Expert Craftsmanship
Our products are made with expert craftsmanship and attention to detail, ensuring that every stitch and seam is perfect.
Unique Design
From bold prints and colors to intricate details and textures, our products are a perfect combination of style and function.
Customer Satisfaction
Our top priority is customer satisfaction, and we stand behind our products 100%.
Dine blokgrupper
Du kunne måske være interesseret i…
Etc. etc.
Fortsæt ind til du har et passende antal varer. Se evt. hvordan templates, som shop / butik opgygger groups og patterns, når varer præsenteres.
-
Does the Browser Block Your Website?
Is your website is blocked in the browser because it’s “not safe”? In that case you have to install the HTTPS protocol. On Simply.com this operation is relatively simple:
Enable HTTPS
- In the Dashboard go to HTTPS settings.
- Enable HTTP
- Optional: force HTTPS.
How about SubDomains?
The HHTS settings will not work on the subdomains. Here you have to enable HTTPS again on each subdomain.
HTTPS and WordPress
If you have WordPress install the plugin “Really Simple SSL” and activate it.
-
Future Challenges for WordPress
The Full Site Editor is not in Beta any more. There are attempts at improvements. But will the new user understand the complex features?
This morning I saw that the FSE editor is out of the somewhat chaotic beta state. That’s great news.
The first impression is positive because the interface is more logical now. You don’t have to search for the styles in weird places any more. All design options are presented in the FSE editor environment.
- At last we have an easy to find navigation menu.
- The styles have a menu handle.
- The template and template parts are also available.
Navigation
The navigation was very hard to find in the Beta state. However, it’s still somewhat unclear what to do when you click the different menus.
They’ll send you to the page/post or template/template part, where the menu appears. There you’ll have to edit things.
Promising, but still a bit puzzling.
Styles
The styles will give access to the different style variations. That’s cool. Now they are more easy to find.
When you click edit you’ll get the actual styles of your site. That’s ok.
Templates and Template Parts
The template and template parts are listed as in the Beta version. At the + you can add another template.
For person beginning to use WP the template-concept is utterly confusing. At least I often meet users that don’t know the difference between content and a template.
FSE (full site editing) is of course cool, but we still need a very good introduction to questions like:
- What is the difference between a template and a page?
- What is the connection between a page and a template?
- What is the best time to edit a template or should I add my content in a page or post?
- Why do we need so many templates, and what are their functions in e.g. TT3?
Of course such questions show, that the person beginning to use WP does not know the basic concepts, like:
- What is a Page (static content)?
- What is a Post (blog, news rooll)?
- What is a template (Design the looks of pages and posts, categories etc.)?
Will this Confusion End?
For the experienced WP user questions like the ones above are trivial. However, the strength of WP was alway it’s unserfriendly approach.
The learning curve in CMS systems like Joomla, Drupal or Typ03 is very steep. When I made Joomla solutions, often the users had to have tutorials.
Personally I fear, that WordPress has become extremely complex. But the new additions to the FSE editor is indeed a positive development.
When I began to use WP the strength was it’s ease of use. You installed WP. Began to write blog posts or create pages. End of story.
The modern user of WP will have to come to terms with very abstract concepts. The relation between content and template can be very hard to explain to new WP users.
For WP teachers and consultants the future is bright. New users will need an introduction course.
And that’s a challenge for WordPress.
-
How to use jQuery in a Page or Post
In order to use jQuery you must get the library. Here we’ll use a CDN. You can import the jQuery CDN in a custom HTML block, like this:
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>That’s it. Now you can use jQuery.
Just for the Hell of it, let’s try and create a button that will hide/show all <p> tags. Select the button, and give it an id. You can do this in advanced settings. Here the id is removeP.
Here is the code that should remove the <p>-elements. Add the script tag to a custom HTML block:
<script> $('#removeP').click(function(){ $('p').toggle(777); }) </script>The code above will detect a click event on the button. We gave the button the id removeP. When a click is detected a new selector will mark all <p> elements and toggle them. A toggle is a bit like a normal on/off switch on the wall. If the elements are visible they will hide away. Or vice versa. The number in the parethesis (777) is the number of microseconds that the toggle animation will last.
Now try to click the button. Does it work as intended?
-
How to Integrate JavaScript Libraries in WordPress
JavaScript libraries can add cool animations or parallax effects to a traditional webpage in HTML, CSS and JavaScript. Here you can learn how to do the same thing in the WordPress editor.
Case: Animate on Scroll (AOS)
Animate on Scroll is a populer animation library. In order to use the library on a single WP page or post you’ll have to load the CSS and JavaScript. Do this in a custom HTML block looking somewhat like this in the <head> section – or at least before the blocks you want to animate:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />This will load the CSS. At the bottom of your page/post you’ll have to load the script in a custom HTML-block:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script>Now you can add the custom code, that will animate for instance an image. Let’s try this with my logo:
Now select the block in the List View. Click the kebab menu, and select “Edit as HTML“.
Now you can see the WP “markup”, and add whatever code you fancy. For instance if you want to flip the image you’ll need code around these lines:
In the HTML block add data-aos=”flip-up” to the image tag:
<figure class="wp-block-image size-full"> <img data-aos="flip-up" src="https://multimusen.dk/wp-content/uploads/cropped-cropped-multimusen-150-150-1.png" alt="" class="wp-image-9017"/> </figure>Now test the page. With a little luck the image will flip.
More Libraries
Now you should be able to integrate all kinds of JavaScript libraries to your pages and posts. Just remember to load the code in the correct position:
- Load CSS before the blocks you want to manipulate.
- Load the JavaScript as close to the bottom of your page as possible.
By your own research try to add effects to your pages and posts, such as:
- Parallax
- Animation
- even jQuery might work
- Bootstrap
- etc.
- et
- cetera
-
PWA: Webapp with Push in WordPress
A web app is an application made by web technologies. The web app will run similar to a native app, that is if the user agrees to install the web app on the device. Several WordPress plugins are able to do this.
Creating a web app i WordPress is surprisingly easy. But make sure, that your web solution looks cool on mobile devices during your design. Probably one or more elements will need some CSS tweaks.
Here I don’t recommend page builders such as Elementor, Divi &c.
Plugin: PWA for WP & AMP
Install this PWA plugin:
It’s easy to use and works in most mobile browsers:
- Chrome: works like a charm. You’ll get a “want to install” message. That’s it.
- AdBlock: you have to install the app manually. However, that’s what we’d expect from this browser, isn’t it?
Push Notifications
Here you have to add a plugin to the plugin. After that create a user profile. Add the token to the PWA plugin. Now pushing should be possible. That is in theory.
When I run the browser version, I’m asked whether notifications are ok. Just answer yeah here. Below: the plugin for push notifications.
Pro & Con
- Pro: a web app will run without web connection if the pages are cached. The pages visited will be cached too. And the app is fast.
- Con: why install yet another app when you can just browse the web?
- Con: When the app is active the cashe now and then work in unexpected ways. You may see old versions of new pages. Because of this I removed the app.
-
WP.tv: Demystifying theme.json
These days I’m following tutorials about block theme development. In these articles I’ll collect the best of them.
In the excellent WordPress.tv series Nick Diego has this workshop about theme.json. Topics covered are:
- How to add fonts
- Color palette – and how to use the variables
- Style variations
- How to use the Child Theme plugin
If theme.json seems baflfing to you Nick’s video is a very good walthrough.
One of the participants asked about child themes. Nick answered that the child theme is still possible. It’s useful for theme variations. The only file you need to edit in the child theme could be theme.json.
The idea seems good, since you would get the benefit from theme updates. If you create a simple copy of a theme, you will not get such updates.
-
WordPress: wrap columns so that the right one gets on top on mobile devices
Normally WP will wrap the columns after a manner where the right one goes to the bottom om mobile devices. Here is a recipe:
Add a class to your column block
In additional classes add your class. In this case I added: petjReverse as my class.
style.css
Then add the this to your style.css:
/* Mobile, Tablet */ @media only screen and (max-width: 783px) { /* will stack reversed */ .petjReverse { flex-wrap: wrap-reverse !important; } }Save and update. If need be clear the cache in WordPress and your browser. That’s it.
-
WP.TV: Columns
Nick Diego gives a fine demonstration of how to use columns, rows and stacks. There are also suggestions for some custom CSS that’s reusable.
Building with Columns, Groups, Rows and Stacks. Source: WordPress.TV Part of the reusable CSS is this:
body * { box-sizing: border-box; }