Use the video above to get started, if you want to the alternative editor Elementor.
Category: English Tutorials
WordPress tutorials in English.
-
WP Speed Build Contest
In this video Jamie Marsland present a contest.Two designers battle.
In just 30 minutes they have to build a complete website in WordPress.
-
Style Variations
How to Create a Style Variation for the WordPress Twenty Twenty-Four Theme
WordPress themes provide a flexible foundation for designing websites, and with the introduction of Full Site Editing (FSE), customizing these themes has become more powerful and accessible. The Twenty Twenty-Four theme, one of WordPress’s default themes, is an excellent example of a theme that embraces modern design principles while offering a high degree of customization. One of the standout features is the ability to create and apply style variations. In this article, we’ll walk you through the steps to create a style variation for the Twenty Twenty-Four theme.
Understanding Style Variations
Style variations in WordPress allow you to create different design looks without altering the core structure of a theme. By tweaking colors, typography, and other design elements, you can create distinct visual styles that suit different brand identities or personal preferences. These variations can be saved and easily switched, offering a way to experiment with different aesthetics or provide users with multiple design options.
Prerequisites
Before diving into creating a style variation, ensure you have the following:
- A WordPress Site: Ensure your WordPress site is set up and running with the Twenty Twenty-Four theme installed.
- Basic Knowledge of CSS and JSON: While not mandatory, understanding CSS (Cascading Style Sheets) and JSON (JavaScript Object Notation) will help you fine-tune your style variation.
- A Child Theme (Optional): If you prefer not to modify the parent theme directly, creating a child theme is a good practice. This way, you can preserve your customizations even after theme updates.
Step-by-Step Guide to Creating a Style Variation
1. Set Up Your Development Environment
- Access your WordPress installation files via FTP or your hosting provider’s file manager.
- Navigate to the
/wp-content/themes/twentytwentyfour/
directory.
2. Create a
styles
Folder- Within the Twenty Twenty-Four theme directory, create a new folder named
styles
. This folder will store your custom style variations.
3. Create a JSON File for Your Style Variation
- Inside the
styles
folder, create a new file and name it something descriptive, such ascustom-style.json
. - This JSON file will define the properties of your style variation, such as colors, typography, and layout settings.
4. Define Your Style Settings
- Open the
custom-style.json
file in a code editor. - Here’s a basic structure to get you started:
{ "version": 2, "isGlobalStylesUserThemeJSON": true, "settings": { "color": { "palette": [ { "slug": "primary", "color": "#1a1a1a", "name": "Primary" }, { "slug": "secondary", "color": "#ff6f61", "name": "Secondary" } ], "background": "#ffffff" }, "typography": { "fontSizes": [ { "slug": "small", "size": "12px", "name": "Small" }, { "slug": "large", "size": "24px", "name": "Large" } ], "lineHeight": "1.5" } } }
- Color Palette: Customize the color palette by adding your preferred colors. Use the
slug
to identify the color,color
for the hex value, andname
for a human-readable label. - Typography: Adjust the font sizes and line heights to match your desired style.
5. Add Additional Customizations
- Beyond colors and typography, you can customize various other aspects such as spacing, border radii, and more. The structure follows the same JSON format.
6. Save and Apply Your Style Variation
- After defining your customizations, save the
custom-style.json
file. - To apply this style variation, go to the WordPress dashboard:
- Navigate to Appearance > Editor.
- In the Editor, select Styles from the top-right corner.
- Your new style variation should appear as an option. Click on it to apply.
7. Test and Refine
- After applying your style variation, preview your site to ensure everything looks as expected. Tweak the JSON file as needed to refine your design.
8. Making the Style Variation Available to Users
- If you want your style variation to be available to other users of the theme, include a description and screenshot:
- Description: Add a
title
anddescription
key to your JSON file to provide context about your style variation. - Screenshot: Create a 1200x900px image showing a preview of your style variation. Name it the same as your JSON file but with a
.png
extension (e.g.,custom-style.png
). Place it in thestyles
folder.
- Description: Add a
9. Distribute Your Style Variation
- If you’ve created something worth sharing, consider distributing your style variation. You can package it with your theme or share it on platforms like GitHub for others to use.
10. Shortcut
Since the theme.json file in the root folder contain all the styles of the theme, a very fast way of working is this: just copy-paste the theme.json file from the root directory to the ./styles directory. Rename the file to something convenient, e.g. myWay.json. Then add the title of your style variation, as in line 4 below:
Conclusion
Creating a style variation for the Twenty Twenty-Four WordPress theme is a powerful way to personalize your website’s appearance while keeping the underlying structure intact. Whether you’re aiming for a sleek, modern design or a playful, vibrant look, style variations offer a flexible way to achieve your vision. By following the steps outlined in this guide, you’ll be well on your way to creating a unique style variation that reflects your brand or personal aesthetic.
Note
This article was partly generated by ChatGPT from one of my conversations, see this link: https://chatgpt.com/share/e/8a300d32-5807-43a4-a85e-978a9290a332
For some reason ChatGPT forgot to mention the title field in the json file, so I’ve added the missing information.
-
Elementor Tutorials
Elementor is one of the most popular page editors. It was one of the first “drag and drop” editors for WP. If you want to use it consider these pros and cons:
Pros Cons Ease of use. Nagware: you’re constantly reminded that you need to pay in order to XYZ Library of templates The free version is very limited. Things you can do for free in the ordinary WP editor may be blocked. That’s insane. Many tutorials online, well documented. Bloated codebase. A few pros and cons concerning Elementor. Here are a few Elementor tutorials to get you started. Whether you chose to work in the standard WP editor or alternatives like Elementor is simply a matter of taste – just as when you choose your favorite editor for code editing.
These days Elementor is abandoned by many WP users, because the built in WP editor is free and capable of pretty much the same options. However, now you can try it.
-
New: Learn WordPress
On WordPress you can find several excellent video tutorials – from new to advanced learners.
Below you can see a few sample videos. Click the button below in order to choose the best learning path for you.
What is the Difference between the “Blog Editor” and the “Site Editor”
-
AI and WordPress
Research Notes
When AI boomed WordPress tried to build in an AI feafure in the Jetpack plugin by Automatic. The feature was hyped. It could create content in different tones of voices, like angry, happy or romantic.
To some developers the AI Jetpack feature was unpopular. Some developers even wrote PHP code in order to remove the AI feature from the UI. See this thread.
However, the AI options are booming in the Plugin forest. Here are a few options.
JetPack AI Assistant
- Install the JetPack plugin
- Activate it
- Activate AI
Now you can use the assistant, in a post or on a page create a new paragraph, and enter:
/ai
Now you can fire off a prompt. However this solution is not free. When I wrote these lines the price was $8 per month. The solution was free for a while, but not any more.
AI Engine by MEOW
When activated the plugins will add a wizard wand to the UI when you write content.
Also expensive.
Article: Best WP AI Plugins
Here is a fine overview with both free, paid and freemium solutions:
-
Font Variation Style
OK, now I’ve tried to add more fonts via a Style Variation. However, you have to add the font to the page or post template in order to use it. Here and now the curly font in the menu was added via a Style Variation.
You cannot see these things in the design book.
-
The Portfolio
Domain or subdomain?
- portfolio.yourdomain.dk
- yourdomain.dk
You may or may not want to have your portfolio in the main domain. If you want to have your portfolio as the primary thing in your domain, just skip this chapter.
A subdomain is a subdirectory in the main webdomain. On some web hotels you have to specify such a directory in the Dashboard of the webhotel. This is the case on Simply.com – but not on One.com, where any subdirectory is regarded as a subdomain. Just to mention the usual suspects.
Prepare a subdomain for the portfolio. Make sure that your new domain runs with HTTPS.
Plan Content
What kind of content do you need for the portfolio? Rearch and brainstorm. On most portfolios you’ll see pages like:
- About Me
- CV
- Contact
- Gallery
- Projects
- Blog – with amazing news about your projects here and now
1) Creative Process
It does not harm to be well prepared. Go through the steps from idea generation to actual wireframes. When you have a clear idea about the content of the site continue.
2) Create Dummy Pages
Create the pages, but in this phase just add dummy content. If you have the pages it is easy to create a navigation.
AI can be a great headstart for dummy content creation. Later on you can modify to real content.
3) Navigation
When the dummy pages are made, it’s more easy to create the navigation menus. You can have as many as you want to, and style them according to their position in the design.
Create the main navigation menu for the header. You may also want to create special menus for other pages.
4) Choose a theme
Find a good WordPress theme, and make sure that it’s a block based theme (not an old style PHP-theme). My recommendation is to stick to a standard block theme.
Avoid crap “freemium-premium” themes. They will hinder you from adding anything interesting untill you pay.
I’ll recommend either Twenty Twenty Four or the most recent WP standard theme.
If you’re an ambitious Multimedia Designer of course your could try to create a theme via Carolina Nymarks theme generator.
Your content will not be affected by the theme. If you want another look and feel just try another theme.
5) Header, Footer, etc.
One of the first things to tweak is the header with navigation and footer with the relevant information.
6) Templates
Probably your theme will have templates for pages, posts, categories, search and 404. Often a blank theme will come in handy – or perhaps a page with:
- Header
- Content block
- Footer
Such a page would be nice if you don’t want to be restricted by your theme.
7) Assign templates to your pages
When the templates are ready, open each page and make sure that it will use the correct template.
8) Refine the Content
You can create the content at any time. From now on it’s a matter of refining your content.
9) Testing, Testing …
At any stage of the development tests will improve your portfolio.
- Usability tests
- User experience tests
- Guerilla tests
- Gangster test
- A/B split test etc.
-
Responsive Styles
A while after your theme has been installed, you should inspect how the theme behaves on different devices. Problably the theme needs at least some responsive adjustments.
Tweak Flexbox
When you edit the theme files you can add responsive styles to the style.css or a CSS made via a plugin, like these:
@media only screen and (max-width: 600px) { /** * Add the class noFlex to a group * or row that should not flex * on smaller devices */ .noFlex { display: block !important; } }
If you have say a row that displays flex on smaller devices, you can add the class noFlex in the Advanced field of the relevant block.
Important
If you edit the style.css of the theme directly inside wp_content/themes/yourTheme/style.css the code will not be saved in the theme.
In a case like this the best approach is to:
- Enable another theme
- Delete the theme
- Reinstall the theme with an updated style.css
- Activate the theme.
- Now the responsive rules will be part of the style.css
For unknown reasons WordPress does not export your changes if this is not done. I’m not sure whether this strange behavior is a bug or done deliberately.
-
Bitter Font
Bitter – the font only works in the TT4 style “Permutation”.
Because that’s where it is!
Method:
- Creata a style in /styles/
- e.g. myStyle.json
- Download the font from Google Fonts: Bitter
- Convert to woff2 with a converter like this.
- Place the files in ./assets/fonts/Bitter
- Add the file manually to myStyle.json
{ "fontFace": [ { "fontFamily": "Bitter", "fontStyle": "normal", "fontWeight": "400 700", "src": [ "file:./assets/fonts/Bitter/Bitter-VariableFont_wght.woff2" ] }, { "fontFamily": "Bitter Italic", "fontStyle": "italic", "fontWeight": "400 700", "src": [ "file:./assets/fonts/Bitter/Bitter-Italic-VariableFont_wght.woff2" ] } ], "fontFamily": "\"Bitter\", sans-serif", "name": "Bitter", "slug": "bitter" }
-
How to Create a Custom WordPress Block Theme
In this step by step tutorial you will develop a block based WordPress theme from scratch!
Why create your own theme?
There are more than 6000 themes for WordPress, why should you then attempt to make your own?
- As a Multimedia Designer you must be able to develop themes in WordPress.
- When you know the code, you can modify anything.
- You are not caught in the nasty “free-but-in-the-PRO-version-you-can” trap.1
Step 1) Create the theme via a theme generator or boiler plate
This will give you a fast track devolopment, since most of the files are ready. I recommend Carolina Nymarks excellent Block Theme Generator. Click the button below to get started. If this is your first time, use the basic theme. It is a very good starting point.
In this tutorial you will learn the basics of block theme creation in WordPress, but if you want to study the subject in depth Carolina Nymark’s tutorials and documentation on WordPress full site editing is among the best sources about block theme development.
Now you can install the theme by the zip-file. This will create a directory in your WordPress installation:
WORDPRESS/wp_content/themes/YOUR-THEME-HERE/
Unzip
As soon as the zip is downloaded, unzip it somewhere convenient. Open the directory in Visual Studio Code (or another editor) and have a look at the files.
Open: style.css
You will not see a lot of CSS here. There are some comments. They will tell WordPress the name of your theme, and give the texts for the descriptions that you see in the Dashboard > Appearance > Themes.
Step 2) Add a blank template for your design experiments
In your favorite editor, say Atom, Visual Studio Code or whatever, create a file named blank.html with this markup:
<!-- wp:post-content /-->
Now save blank.html and upload the file to:
(theme)/templates/blank.html
If you want a page with no design whatsoever you can asign the blank template to the page.
Now you know how to add tempates to a block theme.
theme.json
As a web designer you might expect that the CSS styles should be found in style.css. But in a block theme most styles are defined in the more advanced theme.json file.
Bugs Warning!
In JSON it is sooo easy to make errors.
– So make sure to have a back up of your theme.json.
– Edit your code in e.g. VSC or Atom.
– Bugs will cause weird behaviors in the theme.In the following steps we will add colors, gradients and even web fonts and also use them to style some of the blocks.
Let’s open theme.json in our editor and begin with some colors.
Step 3) Colors
More than often designers choose five or more colors for their design. You’ll probably know several color pickers, like:
- Color Picker (DuckDuckGo)
- Color Adobe
- W3 Schools Color Picker
During the creation of the theme you already selected a five colors. You can select these colors in the Dashboard, for instance when you select the color of a text. You can add more colors for the Dashboard in theme.json.
But you’d probably want more colors. In theme.json you can add more colors like this:
Color Palette
In theme.json the color palette is placed under settings.color.palette.
Since the colors are in sharp brackets, it’s an array. And you can add more colors to this palette. Let’s say that I want to add a green grass color:
"palette": [ { "color": "#ffffff", "name": "Base", "slug": "base" }, { "color": "#000000", "name": "Contrast", "slug": "contrast" }, { "color": "#89CFF0", "name": "Primary", "slug": "primary" }, { "color": "#5DFCC1", "name": "Green grass", "slug" : "greenGrass" } ]
In the CSS the color #5DFCC1 will be assigned to the variable:
var(--wp--preset--color--greenGrass)
You can use this variable in additonal CSS or when you style the blocks (see: “Modify the blocks“).
In the Dashboard the color will be visible too. So you can of course also use your colors when your work in the editor.
Exercise
- Add one or more colors to your theme.json.
- In the Stylebook: add your new color to one or more selected elements.
Duotones
Duotone can be used to tint images with two color hues. By Duotone you can create a consistent design, where images are toned. You can add more duotone filters here:
settings.color.duotones
"color": { "duotone": [ { "colors": [ "#6c5513", "#067f0a" ], "name": "Secondary and primary", "slug": "secondary-primary" }, { "colors": [ "#067f0a", "#f0f0f0" ], "name": "Primary and Contrast", "slug": "primary-contrast" } ] }
In the sample above you see how the color pair is defined. It has a name and a slug. The name will be visible when you hover over the duotone in the WP editor. The slug can be used as a CSS variable or when you write additional CSS.
Exercise
Add one or more duotones to your theme.json.
Gradients
Duotones use a two-color array. The gradients may use many more colors. They are also added to the color section:
settings.color.gradients
A single gradient may look like this:
{ "gradient": "linear-gradient(#067f0a 49.9%,#fff 50%)", "name": "Primary color to white", "slug": "primary-white" }
Again the name is what you see in the editor. The slug will be used in CSS as above mentioned.
Step 4) Fonts
Add fonts, and select them in the editor.
You can use several standard fonts or choose to add web fonts from files. Fontfamilies are added here:
settings.typografy.fontfamilies
See the sample here:
In this way you can add standard web fonts.
{ "fontFamily": "\"Times New Roman\",\"New York\",Times,\"Noto Serif\",serif", "name": "Serif", "slug": "serif" },
In additional CSS you can then use the font via the slug:
var( --wp--preset--font-family--primary )
Exercise
- Add one webfont to theme.json.
- Use the font on a paragraph or headline
- In the Stylebook: add the font to a selected element.
Add a Webfont
Webfonts are font files downloaded from the web. You can place the fonts in the theme in:
(theme)/assets/fonts
and then create a directory for each font.
In general it is recommended to use the .woff2 file format. If you download the fonts from google or other sources you can convert the files with this tool:
Addding webfonts will take a few more codelines, see:
You link to the font file like this:
"fontFace": [ { "fontFamily": "Open Sans", "fontWeight": "300 800", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/open-sans.woff2" ] }
Now try to add a webfont (and yes, you have to write “file:./” before the path to the file 😉
Step 5) Use CSS variables with elements and blocks in theme.json
Here are two samples
In theme.json you can modify the styling of these elements and blocks:
- button: Applied to
<button>
elements and button-like links, such as that used for the Button block. - caption: Applied to media captions, which are wrapped in a
<figcaption>
element. - cite: Applied to the
<cite>
element when used for citations, such as - heading: Applied to all heading elements from
<h1>
through<h6>
, but these can be overridden for individual headings. - h1 – h6: Each of the
<h1>
through<h6>
elements can be individually styled. - link: Applied to the
<a>
tag, which is used to create links
From the styles you created so far you know, that the slug will create a CSS variable that may be used by an element or a blog.
This is done in this section of theme.json:
settings.styles
This is how you style a typical block, in this case tha code block. Note how the variable is invoked:
"styles": { "blocks": { "core/code": { "color": { "text": "var(--wp--preset--color--contrast)" } }, ... etc ...
Step 8) Define your frontpage
You can assign a page as a frontpage in several ways.
Set the frontpage in Settings
In the Dashboard click:
Settings > ReadIn the dropdown menu you can choose the Page that vill be your frontpage.
You may also want to choose a Page, that will be the placeholder for your blog posts (i.e. news flow)
Set the frontpage via a template
If one of your templates is named frontpage this template will define what your frontpage looks like.
Step 9) Add Static Pages
Now the work in Visual Studio Code is probably done. However, sometimes you may want to add more features to pages and templates. But for now we’re done.
Now we will add some pages, like:
- My frontpage
- About Us
- Contact
- Blog (as a placeholder for the menu)
Step 10) Add Navigation Menus
Add the navigation menu. Follow the steps from the previous tutorial:
Step 11) Add Posts
If you have made a page named blog add it to the menu (if it is not there by now).
Now you can add posts – so whats going on in your life?
Step 12) Theme Modifications in the Style Book
The Stylebook is a cool feature in WordPress. Here you can see – and even modify – all the components in your style. In the Dashboard you find it in:
Appeacrance > Editor > Edit
Then click on the eye-looking symbol:
If you want to edit one of the styles, click on it. Then you can style the components:
Step 13) Export the theme
And now your blog begins to come alive. But if you added changes via the Stylebook you may want a copy of your theme.
In the Stylebook click the kebab menu on the top right. Then you’ll see the following menu:
Then this menu will pop up:
Now you can name your zip file. And now you’re in for a treat. Because if you created additional colors in the Stylebook, styled something – or even created template or template parts – they will be part of your theme.
If you unzip the file you’ll have a complete theme – with an updated theme.json.
Upload your theme to your Github repository!
Yeah!
Step 14) Add Styles and Scripts [optional]
The last step is optional: but sometime you might want to add libraries and additional stylesheets to your WordPress.
Perhaps you want to add animation libraries like Rellax.js, or features like jQuery or Bootstrap. You can add such scripts in functions.php.
Enqueue scripts in functions.php
function petj_mega_menu() { // a css file wp_enqueue_style( 'CSS_Mega_Menu', get_template_directory_uri() . '/assets/css/css.css' ); // below a script wp_enqueue_script( 'JS_Mega_Menu', get_template_directory_uri() . '/assets/js/js.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'petj_mega_menu' );
Here you can see that a CSS is added via the function wp_enqueue_style and a JavaScript is added to the theme via wp_enqueue_script.
The path to the script or file is creates by get_template_directory_uri():
get_template_directory_uri() . '/assets/js/js.js'
In PHP a dot will glue two strings together so the last part is simply the part from the theme folder to the JavaScript: ‘/assets/js/js.js’.
Real men do not back up.
They cry!Step 15) Backup
This part is not strictly part of theme creation, but you need to backup your work on a regular basis. Your content is not part of the theme. You need a backup of both your files and of your database.
Backup A) All Files
Copy all files from the WordPress directory. Save them on your computer. After download you may want to zip the files.
Backup B) The Database
Export the database in PhpMyAdmin on your webhost. Here is what it looks like on my webhost Simply.com:
Save your files and the SQL file somewhere secure.
Restore a Backup
Often the webhost has a backup system. Before you panic and try to restore your backup – see if you can restore your website on the webhost.
If not the last option is this:
- Open PhpMyAdmin and select import. Then import your SQL-file.
- Then upload all the WordPress files via Filezilla or the file administration of your webhost.
- More than often such themes or plugins may block something that should be free and easy to do. As an example Astra once blocked custom HTML, so test themes before they fool you! ↩︎