DEV Community: Altug Gurkaynak

WordPress Pro Tip: Open The Single Search Result Automatically

Altug Gurkaynak — Fri, 06 Jan 2023 06:00:00 +0000

From the perspective of User Experience Design (or UXD in short) we have to put ourselves in the user’s shoes. While doing that, as a designer, I clear my mind from the experience and thoughts I had while creating the product to be have first hand users mind set.

👉 When I did so, I found out that displaying a single item on a search result is pointless.
👉 If there is only 1 result on a search, why bother or lose time viewing it?

On the previous WordPress tip, we talked about limiting the search categories. This time we are taking one more step forward to check if there is only 1 post.

It’s time to write our code

We create a new function in functions.php :

// IF THE SEARCH HAS ONE RESULT, AUTOMATICALLY OPEN THAT RESULT
add_action('template_redirect', 'one_match_redirect');
function one_match_redirect() {
    if (is_search()) {
        global $wp_query;
        if ($wp_query->post_count == 1) {
            wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
        }
    }
}

This is everything. From now on, if your search ends with a single result query, your WordPress site will automatically open that single result.

For detailed information about the wp_redirect we use here: developer.wordpress.org/reference/hooks/wp_redirect

WordPress Tip: Limiting the Search to a Single Category

Altug Gurkaynak — Thu, 05 Jan 2023 06:00:00 +0000

If you are using more than one Category in your posts of your WordPress-based project, and you want your search feature to work for only one of them, this method is for you.

First of all, it is useful to remind you: For simple operations you can do without using a plugin, please do not install plugins on your site! There are 2 main reasons for this:

Security: Plugins are at the discretion of the person who wrote that one. Even if there is no security vulnerability at the time you install it, one may appear in the code of that add-on at a later date and you will not even be aware of it.
Speed: Plugins consume resources. In addition, since each of them carries out several separate processes, it will have negative effects on the opening speed of your page.

So, what are we going to do?

If you know what you’re doing, interfere with your site’s codes by yourself . In our example here, we will solve our problem by adding a simple function to the functions.php file of WordPress.

Case Study: Marinalar.com

While preparing Marinalar.com for publication, we had a problem with searching. We had 2 types of content defined as “posts”: News and Marinas. But our user experience research revealed that the search feature doesn’t necessarily cover the news, and is often distracting. So the search result should have listed only Marinas.

At the end of our research, we discovered that we could solve this problem from the code, not from the frontend.

Let me tell you how you can easily handle this process in 2 steps.

In Which Category the search will be done?

The first thing we need to know is to learn the ID of the category you want to search. For this, we enter the Posts > Categories option from the left menu of your wordpress site.

Then, we move the mouse over the category whose ID we want to learn and look for the tag_ID= part in the link address. You can find this out by right-clicking on the link and choosing “inspect element” or by looking at what the link address.

In our example it says tag_ID=63. In other words, the ID of the Marinas category on our WordPress site is 63. We will also use this number in our code.

It’s time to write our code

We write a new function in functions.php :

// SEARCH IN SINGLE CATEGORY
function single_category_search( $query ) {
  if ( is_admin() || ! $query->is_main_query() )
    return;

  if ( $query->is_search ) {
    $query->set( 'cat', '63' ); // Search within this ID
  }

}
add_action( 'pre_get_posts', 'single_category_search', 1 );

That is all.

Now, all the searches you will make on your WordPress site will be in the category you specify and the results will only be presented within this set.

For detailed information about the pre_get_posts we use here: developer.wordpress.org/reference/hooks/pre_get_posts/

Gradient Texts with Tailwind CSS

Altug Gurkaynak — Wed, 04 Jan 2023 14:44:55 +0000

Gradients are great. Right?
And when it comes to Tailwind CSS it's also great. Right!

So lets make a nice gradient header with Tailwind 🎯

At the example below, I made a simple <h1> with Tailwind codes only.

Please open the pen in full mode or just click here to see it larger (for desktops).

Lets Breat It Down

max-w-screen-md 👉 width of the h1
mt-8 👉 margin-top: 2rem
mx-auto 👉 margin-left: auto; margin-right: auto to center the h1
text-center 👉 text-align: center
text-7xl 👉 font-size: 4.5rem
font-bold 👉 font-weight: bold
bg-clip-text 👉 crop the element’s background to match the shape of the text
text-transparent 👉 making text transparent to clip-text work on gradient
bg-gradient-to-r 👉 the gradient from left to right
from-orange-600 👉 starting color
to-purple-600 👉 end color

I 💙 Tailwind CSS

A Simpler and Better Way of Hiding Elements with HTML

Altug Gurkaynak — Wed, 04 Jan 2023 07:03:29 +0000

Hiding an element in web pages is sometimes necessary or we use this for an instant (or temporary) fix. Lets examine the most common types of element hiding in web pages.

Our first two are going be CSS attributes: display: none and visibility: hidden

Even though most of us already use these, let’s sum up for to be clear.

.hideThis {display: none}

.doNotShow {visibility: hidden}

Any element which has the hideThis class (display:none) will be hidden and will not take up any space.

Elements which has the doNotShow class (visibility: hidden) will also be hidden from the eye but they will take up space for their content. If an element (lets say a paragraph), takes 2 lines of space in height, then there will a blank space which has a height of 2 paragraphs if visibility: hidden is applied.

How about using an HTML attribute?

Apart from the CSS hiding, if it is suitable, we can also use a simpler method, such as hidden

<p hidden>This paragraph is hidden and not does 
not take up space. By HTML boolean attribute</p>

Looks very simple right? hidden is a boolean HTML attribute. That means, if present, it specifies that an element is not yet, or no longer, relevant and browsers will not display that element. Works the same way of its HTML twin: display: none

Better Internal Links #

Altug Gurkaynak — Tue, 03 Jan 2023 13:42:22 +0000

Internal links are a great way to divide the parts of your article.

But they can be better!

If you make the internal titles (h2, h3, h4) look different with CSS (see the example below) that makes it possible to share the link. Also this lets the user FOCUSED to that part of the article 🎯

Lets See How

When the internal link is active, make it look featured or different.

So, if you send a link like https://abc.com/page#inner , your title will look different than the other titles (or internal links).

Also, if you use a link image and make it clickable, your readers can/will make the title active and share that internal link by themself. So emphasise it if you can.

Lets see it in action with the code:

https://codepen.io/altug/pen/VwdwKpw

Please share your thoughts and/or development suggestions ✌

Input Fields with Floating Label (CSS Only)

Altug Gurkaynak — Mon, 17 Oct 2022 01:40:22 +0000

I tried to create a better input experience.

Before clicking, the placeholders are set.
On click, the placeholder turns to a floating label.
If the area is filled, border disappears. I used :not(:placeholder-shown) for this.

Nice for a11y and UX (hopefully)

Please share your thoughts: altug.design