Custom fields in two columns (through Functions.php)

Community Forums Forums Design Tips and Tricks Custom fields in two columns (through Functions.php)

This topic is: not resolved

This topic contains 6 replies, has 3 voices, and was last updated by  ameeker 1 year, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #50912

    ameeker
    Participant
    Post count: 29

    http://pastebin.com/Kh0iAvXr <– in case it doesn’t paste properly below.

    I’m trying to display some custom fields in two columns. The fields themselves are displaying fine, but I don’t think I have this written right yet to get them in two columns. I’d like everything that I currently have with the class “location” in the first column, and everything with the class “touchpoints” in the second column. Ideally, I’d be able to use the built in column classes. Can anyone help me straighten this up?

    add_action( 'genesis_entry_content', 'address' );
    function address() {
    if(is_single() ) {
    if(get_field('Address_1'))
    {
    	echo '<div class="location">' . get_field('Address_1') . '</div>';
    }
    if(get_field('street_address_2'))
    {
    	echo '<div class="location">' . get_field('street_address_2') . '</div>';
    }
    if(get_field('po_box'))
    {
    	echo '<div class="location">' . get_field('po_box') . '</div>';
    }
    if(get_field('city'))
    {
    	echo '<div class="location">' . get_field('city') . '<div>';
    }
    if(get_field('state'))
    {
    	echo '<div class="location">' . get_field('state') . '</div>';
    }
    if(get_field('zip'))
    {
    	echo '<div class="location">' . get_field('zip') . '</div>';
    }
    if(get_field('phone'))
    {
    	echo '<div class="touchpoints">' . get_field('phone') . '</div>';
    }
    if(get_field('website'))
    {
    	echo '<div class="touchpoints">' . get_field('website') . '</div>';
    }
    }
    } 

    http://worthington.angiemeekerdesigns.com/attractions/new-attraction/ is the site I’m working on but it’s nowhere near finished.

    • This topic was modified 1 year, 2 months ago by  ameeker.
    • This topic was modified 1 year, 2 months ago by  ameeker.
    http://worthington.angiemeekerdesigns.com/attractions/new-attraction/
    #50918

    Robert Neu
    Participant
    Post count: 90

    Angie,

    You can use column classes for this so you don’t need to write any extra CSS for the columns themselves. You should probably run a check to make sure you’re not outputting empty divs when there isn’t any data. Something like this should work:

    https://gist.github.com/fatmedia/6005802

    I haven’t tested that, but it should work. I can’t remember if ACF automatically sanitizes the output when you use get_field but it’s generally good practice to use esc_attr() when echoing out the data. You probably also don’t need so many divs in there unless you’re planning on styling each line individually, in which case you could use a <span> for some of them.


    Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

    • This reply was modified 1 year, 2 months ago by  Robert Neu.
    • This reply was modified 1 year, 2 months ago by  Robert Neu.
    #50923

    Gary Jones
    Moderator
    Post count: 693

    Instead of all of the echoes, I’d assign the field divs to a variable, then just check that variable to see if it contains anything, before adding a wrapping column div. If that result then contains anything, then output. Same end result as Rob (not echoing empty wrappers), but avoids having to specify that big conditional on line 14.

    Don’t echo until the last possible moment. Build all of the required data first.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #50958

    ameeker
    Participant
    Post count: 29

    Here’s the result of Rob’s:

    http://worthington.angiemeekerdesigns.com/attractions/new-attraction/

    Not yet what I was expecting, but I don’t know why.

    #50977

    Robert Neu
    Participant
    Post count: 90

    It looks like there’s an unclosed div tag in there. It’s causing the second div to render inside the first.

    I updated my code based on Gary’s suggestions. I’m pretty sure this is what he meant:

    https://gist.github.com/fatmedia/6005802

    Again, that hasn’t been tested so I’m not sure if it will work. I also escaped the data for you. Let me know if that does the trick. You probably don’t even need the spans in there, but I dropped them in in case you need them for styling.


    Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

    #50982

    Robert Neu
    Participant
    Post count: 90

    I guess it would probably make more sense to run through that first set with a foreach loop.

    Something like this:

    https://gist.github.com/fatmedia/26faf43ea62f5153c6be

    I’m not totally sure if I’m setting that up right though, there’s a good chance that won’t work and I’m not in front of my main dev machine so I can’t really test it. Gary, can you escape the data that way? Did I screw anything else up on that?


    Co-Founder of Audit WP, a WordPress SEO audit service and Flagship, a new WordPress theme company launching soon!

    • This reply was modified 1 year, 2 months ago by  Robert Neu.
    • This reply was modified 1 year, 2 months ago by  Robert Neu.
    #50994

    ameeker
    Participant
    Post count: 29

    Thanks guys, the second paste is what I used: http://pastebin.com/VKzfWM2j

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.