Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

Using a checkbox to show/hide content – WP Types and Views

This tutorial uses Genesis Framework, Types, and mention of Views.

In this tutorial I’m going to show you how to create a check box that will show/hide content when checked. There will actually be 2 different ways to do it:  one through PHP, and the other directly through Views.

Types Settings

With Types you can set this up however you like, depending on the information that your site is going to display. In this example, I’m going to show you a generic setting, then you can change it to suit your needs.

Note: I have already set everything up so I’m going to be taking screen shots to share what I’ve done.

First, add a new custom fields group by clicking “Types” then “Add a custom fields group”.

show-hide01

Next, enter the information, i.e. name, slug, etc. For this example I gave it a generic name and made it display on a CPT that I made called “Tests”.

show-hide02

Within this group, you’re going to add a check box field, and another field of your choice. The check box field will be used to show/hide the other field that you are choosing. In this example I used a simple text field, but you can use anything you like.

In the check box settings, I have the following:

show-hide03

Once again the name can be whatever you like. I used the number “1” to store the value, but if there is nothing checked, I don’t want it taking up room on my database.

Afterwards, I added a text field. As I said before this can be anything, just remember the slug name you give it because we’re going to use that later.

Once Types is set up, save everything, and we can move forward to the next step.

Setting Up with PHP

Since Types is free, I’m going to show an example with PHP first. This way if you haven’t purchased Views yet, you can still get the same results.

The first thing you’ll need to do if you don’t have Types is set up a template. If you’re using a Custom Post Type, then you should name your file single-CPTNAME.php. Replace CPTNAME with the slug of your Custom Post Type.

In my example I used a CPT called “test”, so my file is called single-test.php. This will allow me to set up a template for ALL my single posts under the “test” CPT.

Now the code. Here’s the code snippet to use in order to set up the show/hide:

[php]<?php /*
Template Name: Testing
*/
remove_action( ‘genesis_entry_content’, ‘genesis_do_post_content’);
add_action( ‘genesis_entry_content’, ‘sf_new_post_content’);

function sf_new_post_content() {

$company_description = do_shortcode(‘[rawr][types field="company-description" class="" style=""][/types][/rawr]’);
$location = do_shortcode( ‘[rawr][types field="check-box" class="" style=""][/types][/rawr]’ );

if ($location == 1) {
$industry = do_shortcode(‘[rawr][types field="random-string" class="" style=""][/types][/rawr]’ );
} else {
$industry = "";
}

$basicJob = ‘<p>’ . $location . ‘</p><p>’ . $industry .'</p>’;

echo $basicJob;
}

genesis();[/php]

Get the gist here.

This example is very basic but here’s what it does line by line.

[php]remove_action( ‘genesis_entry_content’, ‘genesis_do_post_content’);
add_action( ‘genesis_entry_content’, ‘sf_new_post_content’);[/php]

Since we’re using the Genesis Framework, the current actions are replacing the content that would normally be displayed from the WYSIWYG editor. You don’t have to replace the content though, you can put this information before it, after it, wherever you want really. In this example, we’re going to replace it.

function sf_new_post_content(): This is the name of the new function that we’re adding to replace the post’s content.

Our variables are up next.

[php]$company_description = do_shortcode(‘[rawr][types field="company-description" class="" style=""][/types][/rawr]’);
$location = do_shortcode( ‘[rawr][types field="check-box" class="" style=""][/types][/rawr]’ );[/php]

With Types there are different ways to display the content you created. Each field created in types generates a shortcode, which is why the do_shortcode action works.

Alternate methods would include the WordPress method: echo get_post_meta($post->ID, 'wpcf-random-string', TRUE);

[sws_yellow_box box_size=””] Note: Types always prefixes its custom fields with “wpcf-” so if you use this method, make sure you do to! Also, make sure you have global $post; within the function or it won’t work! [/sws_yellow_box]

The Genesis Method: echo genesis_get_custom_field('wpcf-random-string');

And last, the Types Method: types_render_field("random-string", array("output"=>"raw"));

ALL OF THE ABOVE METHODS WILL PRODUCE THE SAME RESULTS! It’s really just a matter of preference.

Moving on…

[php]if ($location == 1) {
$industry = do_shortcode(‘[rawr][types field="random-string" class="" style=""][/types][/rawr]’ );
} else {
$industry = "";
}

$basicJob = ‘<p>’ . $location . ‘</p><p>’ . $industry .'</p>’;

echo $basicJob;
}[/php]

What we’re doing here is saying IF the location variable (the check box) is equal to 1 (which means it’s checked) then the industry variable is equal to whatever we put in the box. Otherwise (else), the industry variable is equal to nothing, which means nothing will show.

We then set a variable to equal what we want output, and echo that variable. Echo means to display it on a page.

And that’s it!

Using with Views

For those of you that don’t want to touch any files, we can accomplish this with Views as well!

In your Views file, whether it’s an actual view or view template, you can use the following syntax:

[rawr][wpv-if show="wpcf-check-box" evaluate="$show = 1"][types field="random-string"][/types][/wpv-if][/rawr]

Basically what you’re doing is defining a variable. So when you write show="wpcf-check-box" you’re telling views that $show is now my check box. Now you evaluate your check box with evaluate="$show = 1" meaning, if $show (your check box) is equal to “1”, then display whatever is in between this shortcode.


If you have any questions, please ask in the comments below, it’s only open to members and will not be public. Thanks all!

Advertisement
About the Author

What’s UP! This is my site, I write 99% of the articles on here. I’m also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I’ve made courses and have a membership as well to help get you on your feet!

0 comments on Using a checkbox to show/hide content – WP Types and Views

  1. Gerard says:

    Thank you so much for your sharing like this.

    Great initiative on your part, it’s very much appreciated. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top