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

Yesterday, 30 March, StackOverflow started to offer a dark theme version (still in beta) for their visitors. On their home page, you can read: “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…

Shortcode for Recent Posts with Thumbnails in WordPress Without a Plugin

Sometimes, you may need to add a section in your page that displays your recent blog posts. This can be very useful for portfolio websites and it can be a nice addition to the home page. Normally, you can only add html inside your WordPress posts. However, with the help of shortcodes, you can add some programming logic and create custom content whereever you want. In this post, I will guide you through the process how to create a custom shortcode to display recent posts with thumbnails in WordPress. Read More…

Display Related Posts With Thumbnails in WordPress Without a Pugin

In this tutorial I am going to show you how to display related posts from the same category as the single post page in WordPress. Without the use of any plugins. The related posts are a great way to improve your website conversions (the time that your visitors spend on the website) and improve Google’s search rankings. In the past, I was using Yuzo Related Posts plugin. However, in the beginning of 2019, there was a vulnerability issue and it is no longer supported by the WordPress community. Read More…

Optimize Divi for Speed

Internet users these days do not have the patience to wait for a webpage to load. In fact, Google survey from 2016 figured out that 53% of mobile users abandon a webpage if it takes more than 3 seconds to load! It is obvious that faster websites improve customer satisfaction and provide better user experience. Then, why is the Divi theme so slow? Don’t get me wrong, I love Divi. Read More…

Setting Up Vuepress With Netlify CMS

Example repo: https://github.com/yonkov/Vuepress-project VuePress is one of the most promising frameworks to create extremely fast and lightweight static websites that act as single page applications. By the end of this tutorial, you will know how to set up VuePress and add a light-weight and easy to use content management system to it, called Netlify CMS. Let’s get started! Table of Contents The Rise of Static Site Generators Why VuePress Why Netlify CMS How to Install VuePress Add VuePress to Github Deploy to Netlify Integrate Netlify CMS to VuePress The Rise of Static Site Generators Static site generators are becoming more and more popular these days due to better performance, low cost, high security and better developer experience. Read More…