Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by mm4
mm4
8,600 Points

Clicking on element to get custom fields data

I created a Loop to put custom posts with custom fields on one of my pages. I want to be able to click on a post and see a lightbox pop up, showing information from the custom fields. This requires a click event through jQuery and some WordPress custom post data wrangling, but I'm not sure how to go about this.

How can I access the custom fields for the post that I click on? This, obviously, is now out of the loop because everything now depends on what I click on.

I was thinking of doing this for a click event: <?php $variable = get_field('field_name'); echo $variable; ?>

Does that sound like a reasonable solution?

2 Answers

eck
eck
43,038 Points

Here is a sample loop:

<?php 
    if ( have_posts() ) {
        while ( have_posts() ) { ?>

            <article class="blog-post" data-custom-field=" <?php the_field('field-name'); ?> ">
                <h1><?php the_title(); ?></h1>
                <div class="content-wrapper">
                    <?php the_content(); ?>
                </div>
            </article>

        <?php } // end while
    } // end if
?>

And this is a sample of how the output html would look:

<article class="blog-post" data-custom-field="This is the contents of post 1's custom field">
    <h1>Blog title 1</h1>
    <div class="content-wrapper">
        <p>Blog 1 content</p>
    </div>
</article>

<article class="blog-post" data-custom-field="This is the contents of post 2's custom field">
    <h1>Blog title 2</h1>
    <div class="content-wrapper">
        <p>Blog 2 content</p>
    </div>
</article>

<article class="blog-post" data-custom-field="This is the contents of post 3's custom field">
    <h1>Blog title 3</h1>
    <div class="content-wrapper">
        <p>Blog 3 content</p>
    </div>
</article>

<article class="blog-post" data-custom-field="This is the contents of post 4's custom field">
    <h1>Blog title 4</h1>
    <div class="content-wrapper">
        <p>Blog 4 content</p>
    </div>
</article>
mm4
mm4
8,600 Points

I get it now! Learned something new and implemented it in my JS file - thanks so much!!!!

eck
eck
43,038 Points
eck
eck
43,038 Points

I am unsure of what the best practices are in this area, since I have not used JS in combination with WP variables yet, but I believe a workable approach would be to use the HTML data- attributes (http://www.w3schools.com/tags/att_global_data.asp) to store info from your custom fields that your jquery could then access and use however you like.

If you want to try this, you would just echo the contents of your custom field during the loop into "data-custom-field=' <?php the_field("field-name") ?> ' " on the appropriate element.

mm4
mm4
8,600 Points

Hi Erik,

I'm kind of confused - if I echo the contents of my custom field during the loop into "data-custom-field=' <?php the_field("field-name") ?> ' " on the appropriate element, wouldn't that mean the latest data- attributes only use information from the last element passed into the loop? No matter what I'd click on, a lightbox would appear showing info as if I had clicked on the last element.

Please correct me if I'm wrong; I may not understand you.