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.
Continue readingAn introduction to WordPress
Easy Web Design Tutorials
WordPress tutorials and more
Easy Web Design Tutorials
WordPress tutorials and more
Development
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…
WordPress Discussion: Customize WordPress notification e-mails
It can be tricky as only the site admin will receive an email when a comment is held for moderation. This can be changed. Adding custom e-mail addresses for comment…
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…
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…
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…
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…
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…
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.…
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…
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…
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
This tutorial gives additional details on how to create a new user role in WordPress. I have also added an overview of the default user roles that exist in WordPress.…
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…
Suggestions on how to fix plugin, themes and fatal errors in WordPress.
Sometimes plugins or themes updates fail and one is left with a non working web site. What is also called a fatal error. There are multiple approaches to try out…
Inspect Element – Taking a closer look at the code of a web site
https://www.easywebdesigntutorials.com/wp-admin/post.php?post=1218&action=edit There is a way to modify the CSS of any web site, but just visiting it and right clicking inside the browser to select Inspect (Element). I have right…
BuddyPress how to show only subscribers on the members page
Going to a BuddyPress members page will show all registered users including the Administrators. We might want to remove/hide the administrator users from the members page. To only show subscribers…
Hide BuddyPress pages and bbPress forums from not logged in users
The following code snippets will redirect a not logged in users when they click a BuddyPress or a bbPress link. There is some variation between these depending on what you…
Customizing the Excerpts Meta Box
Create and style the Excerpt in the Block Editor (Gutenberg). Go to a post and in the right sidebar settings area of the document (Post). Notice the Excerpt area.Here I…
Adding a lightbox to WordPress without using a plugin
Do please help me adjust or improve the below lightbox codes. Thank you very much!Here are the lightboxes I have added to this tutorial. ColorboxLightbox 2Fancybox 3Fancybox 4 (not yet…
Creating a child theme
I will show how to create a child theme and why we use it. We mainly create a child theme to avoid the theme being overwritten when the parent theme…
Editing the wp-config file and debugging in WordPress.
The WordPress configuration file is located in the root of your WordPress file directory and contains the website’s base configuration details, such as database connection information. All code is to…
WordPress Developer Resources
Here are various WordPress developer resources that I find useful. Let me know of other resources I should add to the list. The WordPress Codex – “the online manual for…
Design UI UX Resources
I am adding various resources within design, user interface, user experience and more that I find useful. Do also let me know of other resources I should add to the…
Creating Customizations For Each Page or Post in WordPress
The more in depth customization tutorial is located here: Customize CSS to Style your Site. The below is the shorter tutorial. Sometimes I just want to make a change to…
Conditional logic in WordPress
Sometimes we need to use conditions in the code.Here are some conditional examples using the now expired Beans WordPress Framework. Here is a link to my Beans tutorial website. (Not…
Adding JavaScript JS to WordPress
How to add and use JS scripts in WordPress. A client who has the web site celias.no gave me the task of adding a calculator to her WordPress website. The calculator…
Test a Gutenberg (Block Editor) Pull Request.
Test out a new Gutenberg feature before it has been added to the plugin. Testing a Pull Request (PR) gives us a chance to give feedback before the feature is…
Contribute to WordPress core – Test Trac Ticket and GitHub Pull Requests.
NB! Needs an update! How to test a Trac ticket and Github PR. Further down this page are instructions for testing a default WordPress theme from 2019, 2020 and 2021.…
Contribute to WordPress core – Create a Local Environment.
NB! Needs an update! Description To start contributing to the WordPress core codebase, you will need to set up a local development environment. This environment consists of everything necessary to…
Add custom code to your web site with CodeKit – Custom Codes Editor plugin.
Not sure how well this plugin is supported any longer. An alternative is the Code Snippets plugin. With CodeKit – Custom Codes Editor one can add CSS, JavaScript, HTML, PHP…
How to add custom code to your web site.
There are various methods to add custom code such as CSS, JavaScript and PHP to your web site. To affect the web site functions and how the web site is…
Customize css to style your site
One good way to find the correct CSS tag is to use the browser inspect properties.Find a section on the frontend of your site you want to take a closer…
Adding copyright information to the bottom of the page
Copyright information Most often we add some copyright information at the bottom of the page that says something about year, made by, made with and perhaps a link to the…
Force Immediate CSS changes to be seen on the Frontend
I found code to immediately show CSS site changes on the frontend. I have many times become very frustrated when I adjusted some CSS and could not immediately see the…
Changing the WP editor area through CSS
Add your own editor style We can style the content creation area inside the backend post or page creation screen by using add editor style code. The following code uses…
Creating parallax effects when scrolling WordPress
Creating parallax effects when scrolling with WordPress A static jpg showing 4 product images. These can be animated. I am using two files. One to create the main animation effects (Waypoints)…
How to hide or remove meta boxes in the single post og page screen
How to hide the meta boxes …..but still having them accessible through the Screen Options tab. I was wondering how to hide specific meta boxes in the post screen as…
How to hide or remove meta boxes in the single post or page screen
I am for now reposting the tutorial I made 2 July 1016. (Adding the original date to this tutorial.)I assume this can at a later time be updated to show…
Customizing a video embed in WordPress
Further below I will also show a responsive iFrame Embed. The default view of a Youtube url embeded into a post or page: I am using the intro to Duplicator Pro as…
WordPress Page Templates
A Page template is a way to style a page in an unique way to create another type of style that is different from other pages. It is located to…
Installing Mamp and WordPress locally
Download Mamp & Mamp Pro. Use MAMP to create a local (offline) site. I use MAMP to create a local development site and when I am ready to place it online…
Accordion plugin Collapse O Matic
Collapse O Matic WordPress Plugin tutorial A fairly easy to use Accordion. To open and close showing and hiding content.