Den nye version af WP kommer selvfølgelig med en ny version af standardtemaet, som præsenterer de nyeste muligheder med WP. Uanset om du bruger standardtemaet eller noget andet, så er det altid en god ide at sætte sig ind i nyhederne.
I princippet handler onepagers om at navigere fra et link til et “anker” (anchor) på en webside. Onepagers gør dette på en ekstrem måde. Som regel er ankeret en id i et element.
Du kan tilføje et anchor ved at:
marker blokken i Dokumentpanelet
under “Blok” skal du klikke på “Avanceret”
her kan du tilføje en “anker”
Når du vil navigere til et anker skal du lave et link. Du kan linke fra mange elementer, fx knapper, billeder, nogle markerede ord etc.
Lad os sige, at du kalder dit html anker hobbies. Da skal det link du laver pege på det sådan:
Relative eller Absolutte links?
Linket herover er relativt, dvs. en kort form. Hvis din WP-løsning har flere sider, så virker det relative link ikke fra andre sider eller indlæg. Derfor vil jeg anbefale, at du bruger absolutte links i stedet for. Et absolut link er hele URL’en til siden eller indlægget med tilføjelse af #hobbies, fx sådan:
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:
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.
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:
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.
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:
You can assign a page as a frontpage in several ways.
Set the frontpage in Settings
In the Dashboard click: Settings > Read
In 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:
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.
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! ↩︎
The medieval philosopher Occam said, that if there are more solutions with a similar result, then the most simple one is the best. Then what is the simplest possible Megamenu for WordPress.
Here is the simplified code for a Megamenu:
Now it should be possible to build a template with a Megamenu. The scripts and CSS should be loaded via s plugin – or if it’s a theme from scratch via functions.php enqueues.
If you can create solution with fewer lines of code, let me know in the comments.
Rellax need this script at the end of your page or post:
<!-- initiate Rellax Js -->
<script>
// Place this script at the end of the page.
// Start Rellax
var rellax = new Rellax('.rellax');
// Destroy and create again parallax with previous settings
// rellax.refresh();
</script>
How can I give a <div> or similar container elements full width?
Here you have to have a closer look at the WP code. In your browser try to inspect a div, and note it’s width. If you do this you can see, that the div has a class named alignfull. Add this class to the WP markup:
<!-- Put the cover inside a div element -->
<div class="rellax alignfull" data-rellax-speed="3" style="width:100vw;">
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.