Enhance the code block in Gutenberg with a code snippet
Add line numbers and a sticky copy-to-clipboard button to Gutenberg code blocks in WordPress — no extra plugins required. Works with normal, wide, and full-width layouts.
Easy Web Design Tutorials
WordPress tutorials and more
Easy Web Design Tutorials
WordPress tutorials and more
Tutorials
All
Browser
CSS
Design
Development
Facebook
Github
Gutenberg
HTML
JavaScript
Maintenance
Multisite
Navigation
OSX
PHP
Plugins
Resource
Security
SEO
Site Editor
Something else
Themes
Translation
Trouble Shooting
Web
Web Host
WooCommerce
WordPress
Continue readingEnhance the code block in Gutenberg with a code snippet
How to create and add a YouTube API key to a social media feed plugin
In this tutorial, I’ll show you how to create a YouTube API key and connect it to a WordPress social feed plugin. I am using WP Social Ninja Pro for this guide.
WP Social Ninja tutorial – add an Instagram feed to WordPress & compare to other social media plugins
In this tutorial, you’ll learn how to easily embed your Instagram feed on a WordPress site using WP Social Ninja. After the step-by-step setup guide, I’ll also compare WP Social Ninja with other popular social media feed plugins like Smash Balloon, Spotlight, and Feed Them Social — so you can decide which tool fits your needs best.
How to add custom CSS or JS to Fluent Forms in WordPress
I noticed that the Input text in a form is very small compared to the regular text used on the page. I wanted to do something about this so I looked for areas of Fluent Forms to where I might be able to adjust the input text size. As I did not locate any setting for this I had to add some custom CSS.
How to add a custom maintenance mode screen in WordPress
Learn how to create a custom maintenance mode in WordPress without using a plugin. This step-by-step guide shows you how to add a toggle in the settings menu, choose between a login redirect or a friendly maintenance message, and block search engines.
Uninstall extra WordPress languages in admin
I have seen it on a few sites how additional languages showed up in the WordPress Settings -> General screen. Many times I have wanted to remove the extra languages.…
FluentAuth vs Top WordPress Security plugins
I really like the Fluent plugins and when I heard about FluentAuth I wanted to test it out and also compare it with other similar Security plugins. So I made…
How to use Prime Mover Pro to clean up a web site
I will use Prime Mover Pro to clean up a site. Exclude plugins and database entries. Clone the site and move it over with URL to a development site. Here…
How to use Prime Mover backup and clone plugin
I have a few times tested out the backup and clone plugin Prime Mover and really like the simplicity of how it works. It is not fancy but it is…
How to use small pieces of code also called code snippets in WordPress
As one works on a web site it becomes very likely that one will need to add adjustments. Perhaps even small code pieces also called code snippets. Usually a PHP…
Discourage search engine helpful UI features
I have been using the Discourage Search Engines Notifier WordPress plugin on a lot of sites. I wanted to extend it, so that is what I did. I went to…
Add a minimum WooCommerce order amount
How to Restrict Checkout in WooCommerce if Order Amount is Too Low If you run an online store using WooCommerce, you might want to set a minimum order amount to…
On hover – switch WooCommerce product image to gallery image
With the help of ChatGPT. I began exploring how to switch product image on hover. I had to share that I was using Full Site Editing, the theme Twenty Twenty…
Attach files to WooCommerce emails
How to attach a file to a WooCommerce order email. I went searching online as I had to include an pdf document into the order email. I found what I…
Install WordPress manually
I will show how to install WordPress manually with the help of cPanel. This would most likely be similar even if your not using cPanel.
How to style and split the text in the post title of the Gutenberg editor
I will show how to split the text row through using HTML code. I will also show how to style the text in the post title. Here is a video…
An introduction to WordPress
An overview of what WordPress looks like and of the different screens one can see in the administrator area one uses to create and modify a web site.
How to add a partial payment to Fluent Forms Pro
How I added a partial payment. I am focusing on Item Quantity, Payment Item and Payment Summary fields.
Creating a payment order form using Fluent Forms Pro
Creating a payment order form with Fluent Forms Pro. I go through step by step in how to setup an order form.
How to use calculations in Fluent Forms Pro WordPress plugin
How I made two different forms using calculations in Fluent Forms Pro.
How to use conditionals in Fluent Forms WordPress plugin
This tutorial is about how I set up a ticket form to use conditionals in Fluent Forms. My mind goes into a kind of mental twist when I do this so it took a while to experiment before I decided to create a video tutorial that goes along with this written tutorial.
Importing entries into Fluent Forms Pro WordPress plugin
The following video tutorial shows how I exported submissions / entries, added the Fluent Forms Pro plugin, made sure that I had identical fields and then imported the entries. These showed up in the Entries screen.
Setting up Fluent Forms WordPress contact form plugin
There are two parts to this tutorial.
Part 1 - setting up Fluent Forms.
How to setup Fluent Forms video tutorial which mentions creating the form, setting up an admin notification to get entries submitted, as well as setting up security of the form.
Part 2 - setting up FluentSMTP.
How I did a technical audit of a WordPress web site
As a web designer/developer I have client sites where I on occasion will need to go through the technical aspect of a web site.
Optimizing for speed the WPML WordPress multilingual plugin
After having added WPML and a lot of WooCommerce products and the theme Enfold the backend got very slow.
I tried a lot of things with WP Rocket but it was not helping as much as I had hoped.
How to delete a huge number of Flamingo Contact Form 7 submissions
As I am working on cleaning up a web site one issue that showed up was a huge number of Flamingo submissions / Entries that came in through Contact Form 7. How would I delete these in a simple way?
How to add user access to a Google Analytics account
It is very practical to add additional users to a Google Analytics account. As one whom creates web sites for customers. I ask them to create the account with my help and then tell them to add my gmail to their account.
The following is how to add a user or user groups to your Google Analytics account.
How to customize a Vimeo video embed in WordPress
One can embed a Vimeo video into WordPress using the standard embed link. In the Vimeo dashboard channel one selects the video and clicks the Embed tab and clicks the…
Using the WPML multilingual language WordPress plugin with full site editing
I have lately been exploring the WPML multilingual language WordPress plugin with the default theme Twenty Twenty Four and full site editing. I noticed it works a lot better than I thought it would.
What is WordPress?
Screenshots of the WordPress backend/admin area from 2003 comparing it to 2024 version. WordPress powers over 40% of all web sites on the internet. It is a content management system…
Using the Tula microphone to create video tutorials
I have heard good things about the Tula microphone for a few years now. Last week I decided to purchase the Tula mic package which included a case, dead cat…
Removing unrelated videos from Youtube embeds in Gutenberg
On Slack in Make WordPress I came across a thread which talked about improving the Youtube embed block in Gutenberg and one of the things mentioned was removing the unrelated videos from a Youtube embed.
Icedrive online storage
A while ago I came across the icedrive.net online storage and really liked what I saw. I have been using it on and off for about 1 and a half…
How to add Category labels on top of the featured images in the Post Preview Query Loop in Gutenberg
In the Query Loop I replaced the Featured Image block with a Cover block and added Category blocks on top of the Cover. Making Category button labels. I also added…
Get rid of – remove spam emails from Outlook / Hotmail.
Create a rule and get rid of most spam emails in hotmail. I have for a very long time had a problem with spam emails coming to the inbox in…
Using Screenflow as a video edit program
I use Screenflow to record my various video tutorials. I also use it to edit a video I have made elsewhere such as a through a cell phone. This video…
One solution to be able to send out emails from your web site
Having problems sending and or receiving emails from a web site? I had trouble sending emails from some client sites after a major change at the Norwegian web host ProISP.…
How to use Disqus comments in WordPress
Using the Disqus commenting system The official Disqus Comment System plugin was last updated in 2021 and has very low ratings. I noticed there is an alternative to the official…
WordPress Discussion: Customize WordPress notification e-mails
To whom goes the comment moderation emails go to? It can be tricky as only the site admin – WP backend: Settings -> General -> “Administration Email Address” will receive…
The WordPress Comments / Discussion Settings
The WordPress Settings – Discussion options give you various settings on how to handle comments on your web site. I will go through the Discussion settings to see what we…
Updating the Facebook social media image
As articles / blog posts change featured images might change as well. As one shares the link on Facebook the article might show the old image and not the new.…
How to take a screenshot in Brave and Chrome browsers
Sometimes we need to create a full page screenshot and it is easier than I thought using the Brave or Chrome browsers without having to add an extension. Here is…
Cleaning up a WordPress Database
A WordPress database will over time become more and more bloated, as it becomes filled with various information / entries. From posts, comments, users, themes, plugins and more. Too often…
Privacy plugins in WordPress
The first version of this tutorial. General Data Protection Regulation (GDPR)What is a Privacy PolicyWordPress Privacy settings and guide A few WordPress Privacy plugins– Complianz GDPR plugin– CookieYes plugin– Cookie…
Why I choose to use the Blocksy WordPress theme
I have for a few years been looking for a WordPress theme that could replace Genesis Framework as well as the retired Beans Framework which I have been using. A…
Fixing fatal errors in WordPress
A moment ago a client web site was down. Showing only a white screen with a 500 Internal Server error text. Seeing a white screen with an error message can…
How to add code to Header or Footer in WordPress
In WordPress we can manually add code to the header or footer of a web site using the following example. An example of adding a Google tag to the head…
How to use a Code Snippet plugin in WordPress
Code Snippets plugin overview.How I use Code Snippets.Code snippets in the cloud.Code Snippets Pro. A code snippet is a piece of code one usually adds to the child theme functions.php…
How to join WordPress Slack channels.
How to join WordPress on Slack This is a summary of how to join WordPress on Slack called Making WordPress. It is used as a communication tool for contributing to…
Give Donation WordPress plugin walk through
The Give donation plugin for WordPress. The plugin contains form templates to help create your fundraising campaigns. It also contains fundraising reports and donor management. A WPGive setup wizard is…
Sorting the Media Library
The current Media Library in WordPress has looked the same for many years. What options are there to order / sort / organize the media library today? I have tested…
Changing a menu link to become a text item
Removing the link from a menu item. Sometimes we want a link not to be a link but just be a text item.An example can be a top link with…
Adding icons to your menus
Font Awesome is one of the most used icon libraries. I will show how to add icons to Adding Font Awesome icons to your menu You can use the Font…
Creating a Social Media Menu
Currently with Gutenberg / Block editor we can create a Social Media menu, by adding the Social Icons block. In the backend in a post or page. Write /social and…
Using Conditional logic in menus in WordPress
The current method to handle menus is to go to the Appearance -> Menus. Create a menu, add content and set the display location. Then Save the menu. Add a…
EZP Coming Soon Page Elite plugin
Plugin has been closed down by the author. The EZP Coming Soon Page WordPress plugin is good to use for new launches/maintenance or when the site needs to be offline…
Automatically set fallback featured image
Here are various ways to add a featured image. I am showing examples with setting the same image for all featured images, taking the first image in the post content…
Customizing comments section in WordPress
The following tutorial was originally created years ago. I decided to add on Full Site Editing to where we can modify the comments through the Comments block and associated inner…
Speeding up WordPress site manually and through cache plugins
Sometimes we need to speed up a WordPress site. We would then find a performance plugin. Two sites I use for checking the performance of a site:gtmetrix.com and tools.pingdom.comOther sites…
How to create a Google Analytics Account
Having a Google Analytics account will help we gain a deeper understanding of the visitors to a website. Go to setup a Google Analytics account gives an overview of the…
Drag and drop page ordering in a tree page view WordPress
Currently the default method to rearrange WordPress pages or posts is to go to All Posts / All Pages. Click “Quick Edit” of the page/post you would like to have…
Some plugins I use
There are some plugins I use on most sites that I run. Akismet – is by default installed. Deals with comments spam. All in One WP Security / WP Cerber…
A short overview of WordPress Security plugins
Here is an overview of various Security plugins in WordPress. All in One WP SecurityBulletProof SecurityDefenderiThemes SecuritySecuPressShield SecuritySucuri SecurityWordfenceWP CerberMy thoughts on the security plugins. I installed the plugin Query…
Security Tips
Update WordPress, your themes and plugins.Change username from Admin to something else.Use a strong password.Delete the wp-config-sample.php from your root folder along with the readme and any unnecessary files. I deleted…
An easy way to duplicate post or pages
One can duplicate a post or page or custom posts using a plugin or inserting code (snippet) into the child theme functions file or a code snippet plugin. Code snippet…
Create your own author bio box in WordPress without a plugin
The following uses code to create your own author biography box. It includes adding additional social media to the profile screen as well as creating your own custom author box…
Exporting and Importing WordPress posts pages media and more
It is possible to Import and export content from one WordPress site to another. Exporting content Go to Tools -> Export.Select the content to be exported.All content, Posts, Pages or…
Adding your own avatar
How to add your own avatar to the discussion settings screen in WordPress. One can add an avatar I called “Golden Globe” to the list at the bottom of the…
Manage your avatar in WordPress
Managing your avatar profile image in WordPress. The default for managing your avatar in WordPress is using a gravatar. This means you need to sign up at gravatar.com and add…
Useful WordPress site helper tools
Site helper tools can be many things. I decided to focus this tutorial on Site staging sites and ways to detect with a site is made with WordPress or not.…
Macaw
Macaw a new web design software The Macaw software does not exist any longer. It was purchased by Invision and perhaps integrated into their software. This article was originally written…
Sticky content at bottom of page
The site Header and all the content begins on the bottom of the page. To see more one scrolls and the content is lifted up into view.Here is an example…
Creating a footer that sticks to the bottom – WordPress
Using the default theme Twenty Twenty One as an example when creating a sticky footer. Right click the footer area. Look for the id colophon and class site-footer in the…
How to make a sticky header in WordPress
Sometimes we want an area of the page to be fixed or stick to the page. Sections: A sticky top Navigation menu.A sticky header. Adding a sticky Navigation menu. An…
Cleaning up filenames that have non utf8 characters in them
Using a code snippet to clean up filenames. Gradually adjustments are made in WordPress so that non English characters from file names are sanitized (changed to English characters) when these…
Customizing Altitude Pro Genesis child theme
Altitude Pro is an older Genesis one page child theme which uses widgets to create sections on a page. A section can contain a background image and various content. With…
The SEO Framework
An overview of the SEO Framework WordPress plugin. The Yoast SEO and All in One SEO plugins are very different from The SEO Framework. I have added tutorials to show…
All in One SEO pack
An overview of the All in One SEO WordPress plugin. The plugin went through a major overhaul in 2021. I have added articles to show the settings of a few…
WordPress SEO plugin
An overview of the WordPress Yoast SEO plugin. This plugin is one of the most popular WordPress SEO plugins on the marked. It will automatically take care of the site’s technical…
Using Poedit 2 Pro to translate a WordPress plugin or theme
I am currently using version 3.2 of Poedit. As this article has been updated from the older version which mentioned Poedit version 2. Poedit will suggest translations for each phrase. I…
Contact Form 7 Customization tutorial
After installing and activating Contact Form 7 a new sidebar item is seen named Contact with the sub sections Contact Forms, Add New and Integration. Going to Contact Forms one…
Creating a client friendly login screen
The result of adding custom code and CSS. I enqueued (fetched) the theme stylesheet in this code. It should be added to the functions file of the child theme or…
Adjusting list columns in backend
I will be showing how to adjust the All Posts / All Pages / all Custom Post Type screen. To include additional columns and modify the current ones listed. I…
Creating a movie custom post type
The following shows code to add a custom post type (CPT). I would suggest using CPTUI plugin or the Pods plugin. I have used both and it makes it easier…
How to disable update emails on success
The following code shows to disable automatic update plugin emails on success. One can get a lot of emails when the Enable plugin auto-updates is turned on. Here is code…
Automatic update of WordPress and themes
In WordPress 5.6 and onward we are able to update WordPress core, translations, plugins and themes through the Automatic update in WordPress. Here is an example from the Installed plugins…
Creating a custom dashboard widget
Here is the default Dashboard panel seen in WordPress 5.9. Remove default Dashboard Widgets Removing all the dashboard widgets. The result of removing all the Dashboard widgets. Dashboard Widgets –…
Adding links in the top admin toolbar menu
How to modify the top admin toolbar menu in WordPress. The following approach uses code to be added to a custom plugin, a core snippet plugin or in a child…
Creating a custom user role
Looking closer at the various user roles in WordPress, as well as creating a custom user role.
Reorder left admin menu and add a custom user role
Clone the administrator user role.Reorder the left WP admin menu. Clone the administrator user role When we need a new administrator user role. Create a new role by adding the…
Ninja Forms 3 default form templates
In the backend: Going to Ninja Forms and clicking the ADD NEW blue button a list of templates is seen. By exploring various templates one see how the various forms…
Using conditional logic in Ninja Forms
Conditional logic is a paid add-on / Extension plugin for Ninja Forms. After having installed and activated the extension / add-on. Find the form you plan to use it in.Here is…
Ninja forms 3 walk through step by step guide
I have decided to consolidate the two Ninja forms beginner tutorials that I have. I will add some general tips here and a link to the walk through tutorial. How…
Styling a Ninja Forms contact form
Affiliate link to the Ninja Forms + Layout and Styles addon (I linked to it as a get a small payment if you decide to get the addon instead of…
Ninja Forms WordPress plugin walk through
This is an introduction tutorial to the contact form plugin – Ninja Forms. After installing and activating Ninja Forms go to Ninja Forms -> Dashboard: There are tabs for Forms,…
Easy translation of text or phrases
By adding the below code to the functions.php file or a code plugin one can easily translate text without needing to install a plugin such as Loco Translate or translating…
Invoice payment in WooCommerce
Setting up an invoice payment in WooCommerce. Part 1: Install and activate PDF Invoices & Packing Slips plugin. (Or any of the other PDF plugins.) I am using: WooCommerce PDF…
WooCommerce: Modifying the cart page
How to modify the WooCommerce Cart page. Here is the default cart page using the theme Twenty Twenty Two. Add a continue button. Result: For a variation of the above…
WooCommerce: Adjust shipping price when quantity changes
I have added on to this tutorial.Adjust shipping fee based on quantity in cart.Adjust shipping fee based on total amount in cart. Adjust shipping fee based on quantity in cart.…