Turn subfield radio button options into icons

• Ailsa_C

• January 24, 2014 at 12:23 am

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.

• Elliot

• January 24, 2014 at 11:01 am

Hi @Ailsa_C

You can do this like so:

<?php

$type = get_sub_field(‘event_type’);

?>
<i class="icon-<?php echo $type; ?>"></i>

This will produce an element with a class containing the $type. You can then style this with CSS to add the icon background image

Thanks
E

• Ailsa_C

• January 24, 2014 at 10:33 pm

Hi Elliot,
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.
Many thanks.

• Elliot

• January 26, 2014 at 10:59 am

Hi @Ailsa_C

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
E

• Ailsa_C

• January 27, 2014 at 9:37 pm

Hi Elliot,
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.
Any ideas?

• Elliot

• January 28, 2014 at 9:11 am

Hi @Ailsa_C

If the value of event_type is not being loaded, perhaps there is another issue on the template. Can you please post the code including the repeater field loop?

Thnaks
E

• Ailsa_C

• January 28, 2014 at 8:20 pm

Hi Elliot,
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 -->

• Elliot

• January 29, 2014 at 10:25 am

Hi @Ailsa_C

I can see there is an incorrect field_name in your second has_sub_field function:

<?php if(get_field('event_programme')): ?>
		 <?php while(has_sub_field('presentation_details')): ?>  

This should be event_programme.

Please also indent your code. This makes it much easier to read.

Thanks
E

• Ailsa_C

• January 29, 2014 at 9:04 pm

Hi Elliot,
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?
Thanks

• Elliot

• January 30, 2014 at 9:58 am

Hi @Ailsa_C

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.

• Ailsa_C

• January 30, 2014 at 8:47 pm

Hi Elliot,
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.

• Elliot

• January 31, 2014 at 12:54 pm

Hi @Ailsa_C

Can you please attach a screenshot of the field group edit page with all sub fields expanded, and also a screenshot of the post edit page.

I need to better understand where your data is, and what the field names are.

Thanks
E

• Ailsa_C

• January 31, 2014 at 9:56 pm

Hi Elliot,
Here’s a link to the edit page screenshot

Thanks

• Elliot

• February 2, 2014 at 10:41 am

Hi @Ailsa_C

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.

Thanks
E