In this post, I will show how you can center-align an image in various directions & using different methods (CSS). Any HTML element can be centered horizontally, vertically & both. Also, a horizontally centered image can be aligned at the top & bottom. In the same vein, a vertically centered image can be aligned at the left & right. If this doesn’t make sense, see the infographic below. Please take a look at all the live examples in the link below. Center align an image in all the possible directions If you take a closer look at the above infographic, […]
Read More →In this post, I will show you a couple of examples based on the background-size property. After reading it, you’ll learn how to make a full-width background image, how to make it responsive for all devices, full-screen background on any screen, custom size, etc. Before you start, you can also check the live demo of the finished examples that you’re going to build. You’ll get all the code samples and all the source code that powers the live preview template. Let’s get started. Examples of background image size Throughout the examples, I am only using plain text/paragraphs but you can […]
Read More →The text-align: center can make any text horizontally centered. But if you need to make the text vertically centered, you have to do it differently. In this post, I will show you how to center-align text vertically. Also, I will give you multiple examples & use cases. After reading this post, you’ll be able to vertically center align text from various directions. Last but not least, you’ll get all the code samples and GitHub repo. Before you dive in, check the live previews of the finished products that you’re going to build. Let’s get started. Examples of vertically center-aligned text […]
Read More →
Sometimes you may need to add specific class names to the HTML body tag. WordPress has a “body_class” function that outputs the class names to the body element. In this post, I will show you different use cases of the ‘body_class’ and you’ll know the following: How to add page slug to the body class Go to your WordPress theme folder and open the “functions.php” file. Copy and paste the following code, and save the file. Go to your website & open any page, and now you’ll see the page slug to the HTML body tag. For example- if you […]
Read More →
Do you want to display the author’s biography in every single post? In this post, I will show you how to display the author bio in every single post. The biography section will contain the photo of the author, his/her name, description, and profile link. See the top image as a reference. Navigate to your WordPress theme, and open the ‘single.php’ and paste the following code where you want to display the post author’s biography. Don’t worry, I will explain the code later: Once you save the file, you’ll see the post author’s biography. As I said earlier, it will […]
Read More →
Do you want to display all the authors on your WordPress website? In this post, I will show you how to display the list of authors on your website. Also, I will show you two types of author lists. The first layout will contain authors’ profile pictures, names, and profile links. And the second layout will contain the name (clickable) of the authors with post count. Let’s get started. Display all authors with profile photo, name & URL: First of all, I will give you the code and then explain. Copy & paste the following code where you want to […]
Read More →Due to an SMTP issue, your WordPress website may not send password reset emails or even it may stop sending any emails. At this moment, you won’t be able to fix the issue because you have to log in to the admin dashboard. Anyways, if you forgot your username & password, and if you do not receive the password reset email, this post will walk you through the process to gain full access to your website. In some cases, people complain that their password is not working and WordPress does not send any password reset links. This could be an […]
Read More →
In this post, I will show you how to display related posts on the WordPress website. This is a developer-level article. Don’t worry, you don’t have to be a guru, but you have to know how to edit theme/template files. Assuming, you want to display the related posts below the single post. In your theme folder, look for a file called “single.php.” This is the file that is responsible for displaying all the single posts on your WordPress website. Open this file and look for a PHP code like this: And paste the following code where the section ends (the_content), […]
Read More →Follow the steps to add pagination to the WordPress website: Step 1: Navigate to your theme folder & open the “index.php” or any other archive template where you want to add the pagination. Step 2: Write the following code at the bottom of the template file: It’s not mandatory to write the code within a <nav> tag but it’s a good practice for SEO (search engine optimization) reasons. And it will also help you to write custom styles. You can even give it a CSS class or ID. Only the (above) single line of PHP code will enable pagination in […]
Read More →
SASS is a tool that allows you to write & organize CSS more precisely & very easily. And SCSS is an extension of SASS. For example- style.scss, _header.scss, _footer.scss, and so on and so forth. On the other hand, CSS refers to ‘Cascading Style Sheets‘ that are executable by web browsers. Note: CSS is not a programming language, it’s a stylesheet language. In this post, I will show you how you can configure (set up) your VSCode editor for using SASS/SCSS. Also, I will explain & distinguish between SASS & CSS. Last but not least, I will also give you […]
Read More →