Blog on WordPress, Yii, jQuery, JavaScript and CSS

How to programmatically change the name and description of a site in Yoast SEO

The Yoast SEO plugin for WordPress provides a solid set of hooks that allow you to flexibly manipulate data when building your own meta tags.

In this article, we’ll look at an example where you need to change the site’s title and meta-description for a specific page. The example is simple and is intended to demonstrate how the hooks work. The logic can be customized however you like. For instance, in one of my projects, I had to dynamically generate titles and descriptions depending on the selected region and the services provided. It was a services directory broken down by country, region, city, and category list.

2019-01-27 Pavel WordPress CommentsNo Comments

How to Disable Pagination in Category and Tag Canonical Links in Yoast SEO

There’s a great plugin called Yoast SEO by Yoast available in the WordPress repository. It includes a wide range of features that meet the needs of most beginner — and even advanced — SEO specialists.

However, this post is not about its feature set or advantages over other similar plugins. Instead, we’ll focus on pagination in canonical URLs for tags and categories.

2019-01-20 Pavel WordPress CommentsNo Comments

How to Create a WordPress Shortcode That Displays the Date

In today’s lesson, we’ll return briefly to WordPress and look at how to create a simple shortcode that displays the current date in a custom format. The format will be defined using the PHP date() function.

2019-01-12 Pavel WordPress CommentsNo Comments

How to make a to-top button with smooth scrolling

Hello! In today’s lesson, we’ll look at how to implement a simple “scroll to top” button using HTML, jQuery, and CSS.

As always, we start with the HTML code. Today’s structure is very basic:

<div class="to-top" data-btn="toTop">
	&#10145;
</div>

Where:
to-top — the class we’ll use to style the button
data-btn="toTop" — a data attribute we’ll use to track scroll and click events (yes, we could use the class instead, but in this case we’ll use the data attribute)

2019-01-05 Pavel Web CommentsNo Comments

How to Write the Simplest Stepper Script

In this article, we’ll go over the development of a simple stepper script. A stepper is a script that switches between screens/slides by clicking next or previous buttons. The definition may not be ideal, but the example should clearly demonstrate what it is and how it's used.

Personally, I’ve used similar implementations in a few of my past projects. So I thought — why not build a proper boilerplate for future use and publish it here as a blog article?

Including the Libraries

We’ll need:

Bootstrap — to easily style buttons and fonts
Font Awesome — to use three icons (arrow back, up, and forward)
Animate.css — for simple animations (though you can use plain CSS if you prefer)
jQuery — yes, it's time to move away from it and catch events with pure JS, but for now, let’s stick with it 🙂

Here’s how it looks:

<link rel="stylesheet" href="../library/bootstrap-4/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../library/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../library/animate.css/animate.min.css">
<script src="../library/jquery/dist/jquery.min.js"></script>

2018-12-29 Pavel Web CommentsNo Comments