I have 3 radio button options for my custom field ‘event_type’ Presentation, Workshop and Break in the back end. These display perfectly as words in the front end. However I want to replace the words with icons. Anybody any idea how I do this from the following code:
<?php the_sub_field(‘event_type’); ?> I’m pretty new to php! Thanks.
Do I need to replace something in the above code with reference to ‘presentation’ etc. as I have three icons for each of the three event types. Sorry my php is very basic. I created three classes for the icons .icon-presentation, .icon-workshop, .icon-break which all show background images as you suggest but nothing comes up in the front end.
Please use firebug to confirm the HTML is rendered correctly using the correct classes. Then, please use firebug to make sure your icon classes properly us attributes to display the image.
You may need to use properties such as
display, height, width
Thanks I did as you suggested with display etc. I still get nothing (firebug is great though thanks for tip!). In Firebug I just get <i class=”icon-“></i> It doesn’t seem to pull in the ‘event type’ field.
If I change the php to <i class=”icon-presentation”> they all end up being presentations (which I don’t want of course) but I was just testing if the classes were working, so they’re fine.
Here’s the code – thanks!
<!-- BEGIN .entry-content --> <div class="entry-content"> <p style="margin-bottom: 1rem"><img style="vertical-align:middle;margin-left:10px" src="http://new.cesi.ie/wp-content/uploads/2014/01/presentation-icon.png" /> = Presentation<img style="vertical-align:middle;margin-left:10px" src="http://new.cesi.ie/wp-content/uploads/2014/01/workshop_icon.png" /> = Workshop</p> <?php the_content(); ?> <?php g1_wp_link_pages(); ?> <?php if(get_field('event_programme')): ?> <div id="g1-table-1" class="g1-table g1-table--solid "> <?php while(has_sub_field('event_programme')): ?> <table> <caption><h2><?php echo date('l, M jS', strtotime(get_sub_field('date'))) ?></h2></caption> <?php if(get_field('event_programme')): ?> <?php while(has_sub_field('event_details')): ?> <thead> <tr> <th colspan="3"> <?php the_sub_field('start_time'); ?> - <?php the_sub_field('end_time'); ?> </th> </tr> </thead> <?php if(get_field('event_programme')): ?> <?php while(has_sub_field('presentation_details')): ?> <tbody> <tr><td> <?php $type = get_sub_field(‘event_type’); ?> <i class="icon-<?php echo $type; ?>"></i></td> <td><strong><?php the_sub_field('title'); ?></strong><?php the_sub_field('speaker'); ?></td> <td><?php the_sub_field('location'); ?></td></tr> </tbody> <?php endwhile; ?> <?php endif; ?> <?php endwhile; ?> <?php endif; ?> </table><p></p> <?php endwhile; ?></div> <?php endif; ?> </div> <p><?php echo do_shortcode("[feather_share]"); ?></p> <!-- END .entry-content -->
I can see there is an incorrect field_name in your second
<?php if(get_field('event_programme')): ?> <?php while(has_sub_field('presentation_details')): ?>
This should be
Please also indent your code. This makes it much easier to read.
If I put in `
<?php if(get_field(‘event_programme’)): ?>
<?php while(has_sub_field(‘event_programme’)): ?> `
all my fields under event_programme disappear leaving me with just dates and no information under them.
I imagine I should reference ‘presentation_details’ somewhere in the code in order to pull in all the timetable data. ‘presentation_details’ is my repeater field which contains the details of any one presentation. Maybe I misunderstood your instruction?
In normal situations, the field name used in a
has_sub_field function should be the same field name in the
get_field function before it.
Your code showed 2 different field names, so I was simply stating they should be the same.
If you want to load data from the
presentation_details field, then yes, use this field name.
I changed the
get_field to `presentation_details’ and all my data disappeared.
The data before has the format where the ‘get_field’ and ‘has_sub-field’ are different
<?php if(get_field('event_programme')): ?> <?php while(has_sub_field('event_details')): ?> <thead> <tr> <th colspan="3"> <?php the_sub_field('start_time'); ?> - <?php the_sub_field('end_time'); ?> </th> </tr> </thead>
and it works fine to pull in the time so I thought the other would be fine too. And it is except for pulling in the different icons! Weird isn’t it. Maybe it’s just not possible to call in that ‘event_type’ field.
Thanks for the screenshot. It is important to note that you have a NESTED repeater field. This is why your code did not work.
You must first loop throug the
event_programme, then for each row, loop through the
event_details, then for each row, output the title, type, speak, etc.
Please read the docs for the repeater field to better understand how to work with nested repeater fields.
The topic ‘Turn subfield radio button options into icons’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
© 2022 Advanced Custom Fields.