Add a Custom Welcome Guide in the WordPress Admin (With and Without a Plugin)

In the WordPress admin, when you edit a post or page for the first time, a guided tour pops up and introduces the user to the Gutenberg editor. Traditionally, WordPress was using a visual editor (also known as the Classic Editor to create posts and pages without the need to write custom html. Since version 5.0, the Gutenberg plugin has been integrated into the WordPress core, replacing the old editor. Read More…

How to Display Shepherd.js Only Once

Shepherd.js is an awesome library for creating interactive user walktroughs / client onboarding. With Shepherd, you can create an intro tour to guide the visitor through a list of steps. Each step can trigger different optional actions. For example, the user can go back a step or go to the next step, dismiss the tour without reaching the end of it or close the tour after completion. All the hard work is done for us, and we only need to write a few lines of javaScript to set it up. Read More…

How to Add a Progress Bar in Shepherd

Shepherd.js is an easy to use interactive onboarding user guide that can help visitors throughout the content of the app. This is very useful if you want to show your users around, focus on your product’s strengths or just help the others find their way around your project more easily. Shepherd.js is an open source software that I highly recommend, because it is easy to use, has great documentation, friendly support team and most importantly - it can improve user experience and help your content convert more! Read More…

Two Ways to Add a Tour Guide in WordPress (With and Without a Plugin)

Why is User Onboarding Important? Guided tours matter. In fact, if you are still not using interactive user introductions to guide users throughout your app’s content, you should probably start doing that as soon as possible. Let me tell you why. When the user visits a web page for a first time, he probably arrived there because he was searching for something in the first place and he might or might not figure out where to look for it. Read More…

Switching off the Lights Part Three - Adding Dark Mode to VuePress

Dark mode is one of the newest and hottest trends in web development. Since release of macOS 10.14 in September 2018, more and more apps are starting to offer the option for users to choose a dark system-wide interface over the standard light color scheme. Recent versions of Windows 10 and Android also started to offer dark mode layout. It is perceived that a dark background is much more easier on the eyes and attracts more readers, especially during night time. Read More…

Switching off the Lights Part Two - Adding Dark Mode to Hugo

In my last blog post, I wrote about how to Add Dark Mode Toggle to WordPress. Today I will go a step further, by showing you how to switch between light and dark (day and night) theme mode in Hugo - the fastest framework for creating static web sites. This time, we will make a dark theme toggle button similar to what Redux author and React pioneer Dan Abramov did in his open-source blog Overreacted. Read More…

Switching off the Lights - Adding Dark Mode to WordPress

Since 30 March 2020 StackOverflow started to offer a dark theme version (still in beta) for their logged-in users. They came up with an official announcement on their home page: “You’ve been asking for dark mode for years. The dark mode beta is finally here. Change your preferences any time.” More and More web apps are offering or considering to offer a “dark mode” layout to their visitors that comes together with their normal, “light mode” layout. Read More…

Shortcode to Display Recent Posts for Each Category in WordPress

Sometimes, you may need to add a section in your page that displays recent blog posts. WordPress homepage by default shows recent blog posts and nothing else. However, in most of the cases, the user would like to customize the homepage content to display other sections as well. In such cases, you can use the Gutenberg editor, the new core WordPress editor, since it has a lot of code blocks that are very handy and easy to use. Read More…

2 Ways to Reverse Post Order from a Specific Category in WordPress (With and Without a Plugin)

I had a client that needed to build an archive website for a museum. Needless to say, the museum had thousands of materials, seperated into categories and subcategories. Some of the subcategories needed to have a custom post order on the category archive page (by title or by published date in ascending order), while others should have been ordered with the default post order (date descending). In this tutorial, I will show you two ways how to sort the posts from a certain category archive page like a pro! Read More…

How To Easily Add Parent Category to the WordPress body class

I had a client that wanted to customize the category archives in such a way that they had different content and layout for all the child categories that belong to a certain parent category. For this, I needed a class name, so i can display it on the frontend and customize each child category’s archive page accordingly. In this tutorial, I will show you how to quickly assign the parent category id as a body class name to any WordPress child category’s archive page. Read More…