Try.new is an alternative to WP Playground. It will create a WP instance that will last for half an hour or so. Enough to try out new features.
When you test, try the WP Beta Test plugin.
To be honest try.new is just an attempt to monetize WP Playground. Why use it – when you can get the same options for free with no time limit?
“
wp-nowstreamlines the process of setting up a local WordPress environment.”
If you want to host and run a WordPress Playgroundyou can install it via Node.js. First install node.js – if you don’t have it yet, follow the guide on the node.js webpage.
Node.js works on Linux, Mac and Windows.
Then install the package wp-now by npm, like this_
sudo npm install -g @wp-now/wp-now
cd my-plugin-or-theme-directory
npx @wp-now/wp-now startThen you’re ready to develop or test.
When you restart the site will appear as when you left it. However, sometimes you may need a new version. You can reset your site like this, and then you’ll get a new WP for your experiments:
npx @wp-now/wp-now start --resetA fast way to test a theme is to start wp-now up in the theme directory or in a plugin directory. Wp-now will then open WordPress in that theme. This is supereasy:
cd /localhost/wordpress/wp-content/themes/your-theme/
npx @wp-now/wp-now start
A blueprint is a JSON file, that will define settings like the version of PHP or WordPress. You can install plugins and themes via blueprints too. You can load the blueprint like this:
npx @wp-now/wp-now start --blueprint=path/to/blueprint.jsonThe content of blueprint.json could be something along these lines:
{
"landingPage": "/wp-admin/",
"preferredVersions": {
"php": "7.4",
"wp": "5.9"
},
"phpExtensionBundles": [
"kitchen-sink"
],
"steps": [
{
"step": "login",
"username": "admin",
"password": "password"
},
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "wordpress.org\/plugins",
"slug": "instant-images"
},
"options": {
"activate": true
}
},
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "wordpress.org\/plugins",
"slug": "w3-total-cache"
},
"options": {
"activate": true
}
},
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "wordpress.org\/plugins",
"slug": "wordpress-seo"
},
"options": {
"activate": false
}
},
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "wordpress.org\/plugins",
"slug": "ewww-image-optimizer"
},
"options": {
"activate": true
}
},
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "wordpress.org\/plugins",
"slug": "blocks-animation"
},
"options": {
"activate": true
}
},
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "wordpress.org\/plugins",
"slug": "font-awesome"
},
"options": {
"activate": true
}
}
]
}Here are the options from the man page:
Options:
–version Show version number [boolean]
–path Path to the PHP or WordPress project. Defaults to the current working directory. [string]
–php PHP version to use. [string]
–wp WordPress version to use: e.g. ‘–wp=6.2’ [string]
–port Server port [number]
–blueprint Path to a blueprint file to be executed [string]
–reset Create a new project environment, destroying the old project environment. [boolean]
–skip-browser Do not launch the default browser
[boolean] [default: false]
–inspect Use Node debugging client. [number]
–inspect-brk Use Node debugging client. Break immediately on script execution start. [number]
–trace-exit Prints a stack trace whenever an environment is exited proactively, i.e. invoking process.exit(). [number]
–trace-uncaught Print stack traces for uncaught exceptions; usually, the stack trace associated with the creation of an Error is
printed, whereas this makes Node.js also print the stack trace associated with throwing the value (which does not need to be an Error instance). [number]
–trace-warnings Print stack traces for process warnings (including deprecations). [number]
-h, –help Show help [boolean]
For more information, see:
Blueprints for a range of projects, watch the gallery on Github:
![[Workaround] WP Playground – menu does not work](https://multimusen.dk/wp-content/uploads/DALL·E-2024-08-05-08.14.51-A-punk-music-composer-with-a-mohawk-hairstyle-wearing-a-leather-jacket-with-punk-band-patches-is-sitting-in-front-of-a-computer.-The-computer-screen.webp)
When you create a menu in WP Playground and try to click a link to a page it does not work. So how can we fix this?
The reason for the problem is the URL. The playground is not online, som the URL is a bit strange. If you want a working menu in the sandbox do thus:
In the menu insert the link to the page as a custom link.
Well … if you export the Playground, it’s probably best to enter the pages / posts in the menu in the normal way. So it’s just a temporary workaround.
“It’s just a temporary thing“
(Lou Reed)
WordPress Playground is made for experiments. However, plugins are not easy to install. If you want to install and use plugins you have to change the URL and add:
&networking=yes.
If you have local storage you will be asked if you want to continue working with the local files. Just answer yes.
https://playground.wordpress.net/?storage=device&networking=yesPlayground is experimental. Some plugins will not run here. So you have to experiment. For example Kadence Blocks work like a charm. Jetpack did not.
Sometimes you’ll see that your corrections to CSS or scripts don’t seem to work. If it is not an issue with your code, perhaps the problem is cashing either on the server or in the browser.
To me the best cure of caching issues is:
Here is a good article about cache issues when you develop WordPress.
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.
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.
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.
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?
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.
You can tweak all the styles in the JSON:
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.
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/
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:
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
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.
The code from the tutorial is available on Github:
If you have comments or suggestions for new videos about the subject please let me know in the comments below.
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.
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.
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.
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:
Of course such questions show, that the person beginning to use WP does not know the basic concepts, like:
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.
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.
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:
By your own research try to add effects to your pages and posts, such as:
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.
Install this PWA plugin:
It’s easy to use and works in most mobile browsers:
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.
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:
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.
We use cookies - more information
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.