Get Big Idea
Ideas To Change Your LifeStyle

How to Create a Button for Running a Query

Create a Button for Running a Query {Step By Step Tutorial}

0 67

How to Create a Button for Running a Query

How to Create a Button for Running a Query

How to Create a Button for Running a Query

With WordPress, you can use the WP_Query class for creating a custom query tailored to your own requirements.

So, this will query almost anything that you want for the database – just about anything! Right from posts to authors, custom posts, user login status, taxonomies, and custom fields, you can take in anything to your query arguments.

Now the question is if you can allow an option to your visitors that lets them run, repeat or update a query.

Can you actually include a button that allows them to do that?

Thankfully, you can!

Here, you will learn about a very simple technique for adding a button to a page within your site to run a custom query.

The query uses the ‘rnd’ argument to locate and then display custom field’s values randomly.

A variety of variables are also used for storing data from three different posts.

Thereafter, all of these are output in a single paragraph.

You can add to that query via creating a button on the page that allows users to run the query in the loop and display more random preferred things.

What do You need?

– WordPress (testing or development, installation)

– A code editor

The Process

Step 1: Register a custom post type referred to as “favorite”.

Step 2: Create a meta box for the post editing screen to be used for the new post type.

Step 3: Now add some fields to that specific meta box.

Step 4: Add some of the favorite things and then fill in meta box fields for each one.

Step 5: Run a custom query to get data on favorite things.

Step 6: Store anything the query supplies in an array of variables.

Step 7: Output it as text on the website.

Here’s the code:

function wpmu_output_favorite() {

 

if ( is_page( ’22’ ) ) {

// run the query and fetch the data – store it in an array of variables

$args = array(

‘post_type’ => ‘favorite’,

‘posts_per_page’ => 3,

‘orderby’ => ‘rand’

);

$query = new WP_query ( $args );

if ( $query->have_posts() ) {

$currentpost = 0;

while ( $query->have_posts() ) : $query->the_post();

$favorite[$currentpost] = get_the_title();

$best[$currentpost] = get_post_meta( get_the_ID(), ‘Best Thing’, true );

$worst[$currentpost] = get_post_meta( get_the_ID(), ‘Downside’, true );

$currentpost++;

endwhile;

wp_reset_postdata();

}

// output

echo ‘<section class=”container favorite”>’;

echo ‘<h3>My Favorite Things:</h3>’;

echo ‘<p>Today&apos;s Favorite Things are <b>’ . $favorite[0] . ‘</b> plus <b>’ . $favorite[1] . ‘</b> and a bit of <b>’ . $favorite[2] . ‘</b> . The upsides are ‘ . $best[0] . ‘ and ‘ . $best[1] . ‘, but the downside is ‘ . $worst[2] . ‘.</p>’;

echo ‘</section>’;

 

}

}

add_action( ‘blog_way_before_primary’, ‘wpmu_output_favorite’ );

view rawwpmu_output_favorite_full.php

The Output on the Website:

Here, you will add a button below the paragraph “favorite things” that allows users to run the query all over again and see more favorite things.

This comprises of two different stages:

  1. Editing Query in Plugin
  2. Adding styling for the button

The first stage is to edit the query.

Editing the Query

Start with adding a button. Here, you need to add a line to the query arguments. Thereafter, add the markup for the button below the paragraph with favorite things list.

Initiate the process with query arguments.

Locate this section of plugin’s code:

$args = array(

‘post_type’ => ‘favorite’,

‘posts_per_page’ => 3,

‘orderby’ => ‘rand’

);

view rawquery_args.php

Add this line below:

if ( isset( $_GET[‘new_favorite’] ) ) {

$args[‘meta_query’][0][‘compare’] = ‘<‘;

}

view rawquery_new_arg.php

This will check whether the button you create has been clicked. If yes, it will update the query. Now it is time to add the button.

Locate this section of the similar function:

echo ‘<section class=”container favorite”>’;

echo ‘<h3>My Favorite Things:</h3>’;

echo ‘<p>Today&apos;s Favorite Things are <b>’ . $favorite[0] . ‘</b> plus <b>’ . $favorite[1] . ‘</b> and a bit of <b>’ . $favorite[2] . ‘</b> . The upsides are ‘ . $best[0] . ‘ and ‘ . $best[1] . ‘, but the downside is ‘ . $worst[2] . ‘.</p>’;

echo ‘</section>’;

view rawfavorite_container_section_old.php

Now it is time to add a new line to it. This should read as the following:

echo ‘<section class=”container favorite”>’;

echo ‘<h3>My Favorite Things:</h3>’;

echo ‘<p>Today&apos;s Favorite Things are <b>’ . $favorite[0] . ‘</b> plus <b>’ . $favorite[1] . ‘</b> and a bit of <b>’ . $favorite[2] . ‘</b> . The upsides are ‘ . $best[0] . ‘ and ‘ . $best[1] . ‘, but the downside is ‘ . $worst[2] . ‘.</p>’;

echo ‘<span class=”button”><a href=”‘ . esc_attr( add_query_arg( ‘new_favorite’ ) ) . ‘”>Discover More Favorites</a></span>’;

echo ‘</section>’;

view rawfavorite_container_section_new.php

This will add a button which links to a function instead of another page on your site to update the query arguments. A click on this button will update the query arguments and then run it again.

You should now save your file. Take a look at the website.

The favorite things list will link will refresh a query.

There is no style as it doesn’t look like a button. Adding some styling will help. Most WordPress website maintenance services and experts use the method stated below for the purpose.

Generating and Enqueuing the Stylesheet

Add a new folder and name it as ‘css’. Add a new file inside CSS and name it as style.css. This file should include all styles for your plugin. Enqueue the style sheet properly to ensure it functions well.

Add the following function in your main plugin file:

function wpmu_register_styles() {

wp_register_style( ‘favorites_button_css’, plugins_url( ‘css/style.css’, __FILE__ ) );

wp_enqueue_style( ‘favorites_button_css’ );

}

add_action( ‘wp_enqueue_scripts’, ‘wpmu_register_styles’ );

view rawenqueue_stylesheet.php

The above listed code will enqueues the stylesheet properly in your plugin. Now it is time to add some styling.

Adding Styling to Button

Open the stylesheet you have just created. Style the .button class and the link it contains.

Here’s what you need to do:

function wpmu_save_my_meta( $post_id ) {

//check for nonce

if( !isset( $_POST[‘wpmu_nonce’] ) ||

!wp_verify_nonce( $_POST[‘wpmu_nonce’], ‘wpmu_metabox_nonce’ ) ) {

return;

}

// Check if the current user has permission to edit the post.

if ( !current_user_can( ‘edit_post’, $post->ID ) ) {

return;

}

// best field – save data

if ( isset( $_POST[‘best’] ) ) {

$new_value = ( $_POST[‘best’] );

update_post_meta( $post_id, ‘Best Thing’, $new_value );

}

// part 2 field – save data

if ( isset( $_POST[‘worst’] ) ) {

$new_value = ( $_POST[‘worst’] );

update_post_meta( $post_id, ‘Downside’, $new_value );

}

}

add_action( ‘save_post’, ‘wpmu_save_my_meta’ );

view rawwpmu_save_my_meta.php

Your button is ready! You may also tweak CSS, add some interesting hover effects or even change the color of the text.

Summary

Allowing your users refresh a query is not as complex a process as you think. Simply add code of two lines to query, create some styling and you’re done!
=====================================================================

Comments
Loading...