WordPress User Search (Frontend) – The EASIEST Way!

I was recently been hired on Upwork (yes I still use it, following my rant), to extend on a ‘social network’ that is built with WordPress. This is my first BIG project, besides working on larger sites. The client had a developer working on it previously, but they couldn’t continue due to unforeseen circumstances – so they hired me.

At heart, I knew it was going to be a challenge, but I still applied. I have some development knowledge as far as building social networks, but not with WordPress. The best bit about this project was that I was being paid to learn. That made it more fun and fulfilling.

I built some really amazing functionality, like extending the follow profile code, blocking profile code and a user-generated newsfeed based on who they followed and who they had blocked.

But there was one task that really got to me. The user search functionality. As you know, WordPress’s default search.php file in any theme will just have a loop that will display only posts and pages associated with that search term.

And where I had never tackled something alike before, I decided to search on Google. Definitely not what I wanted, and I just knew that from the size of there snippets – that there was no need for lengthy code.

As a result, I gave up the searching and took a look at the good old WordPress Codex. Guess what, the answer was right in front of my eyes.

Thanks to WP_User_Query(), the search form now allows users to search for other users registered.

Let me show you.

Creating the form

The start of any search journey always begins with the search bar/form. I created a super-basic search form in the searchform.php file, which we can then call with get_search_form().

<form class="form-inline" action="<?php home_url( '/' ); ?>" method="get">
    <input class="form-control" type="text" name="s" id="search" placeholder="Search <?php get_bloginfo( 'name' ); ?>..." value="<?php get_search_query(); ?>" />
    <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
</form>

I’m using Bootstrap 4’s framework for the amazing styling, but you can use whatever you want. I’m also using Font Awesome for their amazing icon library, again this is optional, but button values are so 2017 – in my opinion.

Creating the loop arguments

Once a user has searched, the default result page is search.php. So this is where we will need to put our loop. Using WP_User_Query() we can pull in user information associated with the search query.

<?php $s_query = get_search_query(); ?>

First, we need to assign the current searched term to a variable so we can use it in our WP_User_Query() arguments.

<?php
$args = array(
    'search' => '*' . esc_attr( $s_query ) . '*',
    array(
        'key'     => 'first_name',
        'value'   => $search_term,
        'compare' => 'LIKE'
    ),
    array(
        'key'     => 'last_name',
        'value'   => $search_term,
        'compare' => 'LIKE'
    )
);
?>

Now we can create our arguments. Firstly the ‘search’ parameter searches for a specific query, in this case, it will refer to what the user has entered into the search form. It uses a wildcard ‘*’, to ensure it searches the whole string for that search query.

For example, if we had a user called Harry and we searched for ‘ha’, it would still return Harry, because the wildcard searches for 0 or more characters. We also wrap this in esc_attr() to ensure that we do not input HTML from the search query into the loop.

We’re calling what we want to search for in the database using the ‘key’, ‘value’ and ‘compare’ parameters. We need to wrap them in an array as they come as a set, rather than individual parameters. You can see we’re searching the database for 'first_name' and 'last_name'.

Creating the loop

We’re not going to be an ordinary post loop, instead we’ll be using a foreach loop – yup, my new favourite WP loop.

<?php $user_query = new WP_User_Query( $args ); ?>

First things first we need to store the WP_User_Query() function within a variable and include our variable of $args within the WP_User_Query() function. Confusing, but we need to call this so we can pull the correct data associated with the search query within the loop.

<?php if ( ! empty( $user_query->get_results() ) ) {
    foreach ( $user_query->get_results() as $user ) {
        echo '<p><a href="' . home_url( '/' ) . 'user/' . $user->user_nicename . '/">' . $user->display_name . '</a><p>';
    }
} else {
    echo 'There are no users matching your search.';
} ?>

Last, we have the loop. We need to create an if statement that checks whether there are actually results available to return for the search query. If there are users associated with that search query, return them and if not, then do something. Now we run the loop inside of the if statement, using foreach we can set the $user_query variable as $user to pull specific information within the loop.

Due to the client having Ultimate Member installed, the permalink structure for user profiles is completely different to the generic WordPress author profile pages. So, I had to use the home_url() function to help creating a nice anchor. Within that anchor, we call the users display_name which is generally their full name. It can differ.

To finish our first if statement for whether there’s data associated with the search term, we give people a little message letting them know that there aren’t any users matching their search.

And that wraps it up. Oh, one last thing – make sure you indent your code correctly – don’t make it messy for other people that are working on that project with you.

Sources

WordPress is NOT Dead! – Why WordPress is Amazing in 2018

WordPress is undoubtably the most used Content Management System in the world for bloggers and business owners. Pretty much anyone and everyone who owns a website is using WordPress for their desired management of content.

Why?

Because WordPress is simply… amazing!

And, to even be asked the question, “is WordPress dead?”, is one of the most bizarre things I’ve ever heard since building with it, making clients happy with it and using it in general.

So, the answer is NO, WordPress is not dead. It’s alive and still making the internet a better place. Here’s how I see it, if WordPress is dead, blogging is dead.

Did you know, 74.6 million websites depend on WordPress for their website, whether it be a business or blogging website.

The thing is, WordPress can do pretty much anything you want it too, with, or without knowledge of coding languages, why?

  1. Plugins – WordPress comes with a plugin library with a quantity of 54,274 (and that’s off this second me writing this post), that allow you to extend WordPress’s core functionality.
  2. Widgets – WordPress comes with a pre-built section of widgets that allow you to perform specific functions, like displaying posts and menu’s anywhere on your site.

But that’s not all there is too it. Automattic (the company who created WordPress) are constantly working on new ways to improve the system with security updates, function extendability, usability, user interface and customisation. It’s a developers playground.

Of course, like any other platform there are some issues. In which, WordPress has a support forum for all users, whether you’re a blogger or a developer.

There are always going to be more pro’s than con’s with WordPress, because of way it’s constantly updated to evolve along with the internets standards – which it goes above and beyond.

Open-Source

The main thing about WordPress is that it’s open-source and anyone can use and edit its core files. With this, you’re free to use WordPress without having to pay for a single license fee.

Automattic created two versions of WordPress:

  1. WordPress.org – this public version allows you to download and self-host your WordPress site, for free.
  2. WordPress.com – this commercial version allows you to create a WordPress-hosted website via WordPress themselves, at a price.

For developers and site owners though, WordPress.org will always be the way forward as it gives you the most flexibility.

Security

There are 50 employee’s working on improving security for WordPress, every single day. Which means, it’s pretty much impossible.

Obviously, along with any website there lies risk of intrusion – but that’s the whole point of their security team working round the clock to help keep our data and website’s secure.

If you’re not satisfied with WordPress’s core security, then there are a handful of plugins that will extend the security functionality. Namely:

All of the above have pretty much the same functionality, but all with the same intention – keep your site secure.

Designed for YOU

Before WordPress became free-source, WordPress.com was for simply for bloggers – so the user interface is easy to use and read.

The good thing about WordPress was that it was specifically built for you, not specifically to bloggers or developers. Everyone who is anyone can use it.

Maintenance

As WordPress is a free open-source software, you’ll need to to host the website yourself and buy a domain. Effectively, WordPress is cheaper to maintain than many other CMS providers like Drupal and Joomla, and the commercial version of WordPress.

You can do the math, but domain + hosting = CHEAP.

SEO

There are systems out there that cap your SEO efforts, namely Wix – in which, decrease the chance of a successful ranking in search results. If you’re an SEO and looking to encompass SEO into your website, then WordPress is your answer.

With WordPress coming with pre-built permalink and other SEO features, you can also extend on them using plugins. You can use a plugin like Yoast SEO to edit your meta data, OG and social data, sitemaps, breadcrumbs, etc.

Everything that an SEO will need to configure for on-page optimisation, you can do with WordPress and Yoast SEO.

Themes

WordPress comes with a library of professional designed themes, some free and some of charge. Did I mention there’s thousands? And even if they aren’t in the WordPress library, there are third party sites that have theme libraries too.

On this note, WordPress themes are a developer’s playground – literally.

You can build pretty much anything into your WordPress theme, with the help of a plugin or hard-coding it yourself. The possibilities are endless. Let’s take a look at this site for example, how gorgeous is that mega-nav? Powered by WordPress, developed by a genius.


I think that pretty much sums it up, WordPress is not dead and won’t be anytime soon. With Automattic constantly updating and upgrading the functionality, it seems like a rapidly-evolving CMS, that will never die out.

How to Set Up Thank You Page Tracking in Google Analytics (3 EASY STEPS)

Google Analytics has so many functionalities that not all SEOs are making the most of. One thing about GA that I love is the goal funnels, in which, you’re able to set up tracking for a specific URL, the duration on a page, how many pages the user visits within that session and event tracking (i.e. link clicks).

Today, I’m going to show you how to set up destination tracking for your thank you page. This will show you conversion data when your contact form is getting submissions.

1. Set up a thank you page

Firstly, you’ll need to setup a thank you page. If you’re using WordPress for your website, then create a new page and give it a title of your choice, preferably something that is noticeable from the other pages in the list.

Psst.. I only have two pages, so that last sentence doesn’t really apply to me.

On the page, add some joyful text for the user to see once they’ve submitted the form.

Here’s the text that I added:

Thanks for getting in touch!

Please note, due to the amount of recent submissions, please allow 48 hours before following up from your initial submission. I’m working my way around to your email, don’t you worry.

Or if you want this in HTML you can copy and paste this code into your dedicated page:

<p>Thanks for getting in touch!</p>
<p>Please note, due to the amount of recent submissions, please allow 48 hours before following up from your initial submission. I'm working my way around to your email, don't you worry.</p>

2. Make sure the page is set to noindex

This isn’t mandatory, but it’s worth it unless you want organic traffic messing up your campaign. In order to noindex your page, install and activate the Yoast SEO plugin. From here, head over your new thank you page and scroll down to Yoast SEO box (generally below the TinyMCE).

Click on the cog icon and change the ‘Meta Robots Index’ to noindex.

Then hit publish.

For those of you who aren’t using WordPress, here’s how to noindex your thank you page in HTML:

<meta name="robots" content="noindex" />

That’s step 2 complete.

3. Sending your contact form to your thank you page

Next, you’ll need to send your contact form to your thank you page once the user has submitted the form successfully. I’m using Contact Form 7 so I’ll show you how to set up the redirect with that.

This is the really annoying part, you’ll need to add the snippet below into your header.php file before the end of the <head> tags.

<script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        location = 'https://seojake.com/thank-you/';
    }, false );
</script>

To add this, go to your WordPress dashboard and hover over the ‘Appearance’ link, then select ‘Editor’.

Now go to the far-right side of the page and find the header.php file.

 

Finally, we can add our code. See the image below with the code added just before the closing <head> tag (</head>).

Old Way (Alternative Route)

Before, we were able to add the event listener within the ‘Additional Settings’ section when editing the chosen contact form. It looked something like this:

on_sent_ok: “location.replace('https://seojake.com/thank-you/');

You can still use this code for now, but CF7 recently stated they will be deprecating and removing this syntax by the end of 2017.

And that’s it folks!

Give it a quick test and make sure everything is running and redirecting smoothly. Now you can start tracking your contact form conversions and view the data in Google Analytics. Great, eh?

Thanks for dropping by guys, and I hope this helped you out.

Creating a shortcode for a button in WordPress

When I first started out in WordPress, I was using the WYSIWYG editor to create my buttons and trust me, looking back now, “Jesus, it was long winded”.

Only if I knew back then, how to create my own shortcodes for my buttons it would have been great and definitely more time consuming.

Today I’m going to share with you how I do this. So, we’ll turn this:

<button class="red">
    <a href="#">Shop now</a>
</button>

Into a working button that doesn’t require any HTML at all, we can use it with the shortcode function in WordPress.

In your functions.php file, you’ll want to add a new function:

<?php 

function button($atts, $content = null) {
    extract( shortcode_atts( array(
        'url' => 'placeholder goes here, preferably a #'
    ), $atts ) );
    return '<button><a href="' . $url . '">' . do_shortcode($content) .'</a></button>';
}

add_shortcode('button', 'button');

?>

Here you’ve created a function that creates the shortcode, here’s how it works:

  • Create the function called button
  • Extract the shortcode variables to import variables into the following array
  • Created our array variable url so that we can insert our own URL later
  • Defined the array as our atts (attribute) variable
  • Return / call out our button
  • Turn the function into a shortcode

Now we’ve created the function, we need to display the shortcode on our WordPress website. For the sake of this tutorial, let’s create a post and enter the following:

[button url="/shop/"]Button Text[/button]

This will then display something a little like the following:

[button url=”” class=””

But we want the button to have a class right? Sure, let’s make a few adjustments to our functions.php snippet:

<?php

function button($atts, $content = null) {
    extract( shortcode_atts( array(
        'url' => '#',
        'class' => 'class-name'
    ), $atts ) );
    return '<button class="' . $class . '"><a href="' . $url . '">' . do_shortcode($content) .'</a></button>';
}

add_shortcode('button', 'button');

?>

So now we’ve added an attribute to our array that allows us to set the class in the button.

In order to add a class to the button, you’ll have to add define this in the shortcode:

[button url="/shop/" class="class-name"]Button Text[/button]

The button currently looks super basic, so lets add some CSS to the button:

button.class-name{
    background-color:#4DD0E1;
    border:0;
    outline:0;
    color:#E0F7FA;
    -webkit-box-shadow:5px 5px 5px -2px rgba(173,173,173,1);
    -moz-box-shadow:5px 5px 5px -2px rgba(173,173,173,1);
    box-shadow:5px 5px 5px -2px rgba(173,173,173,1);
    transition:0.5s all ease;
    -webkit-transition:0.5s all ease;
    -moz-transition:0.5s all ease;
}
button.class-name a{
    display:block;
    padding:10px 15px;
    color:inherit;
    text-decoration:none;
}
button.class-name:hover{
    background-color:#80DEEA;
}

This is a great way to display a custom button over and over in WordPress, I hope this helped you as much as it helped me.