Turn radio button options into icons WordPress
- SOLVED
Hi,
I need a bit of help with php. 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. I have css for the icons in three different classes example:
i.icon-presentation {
background-image: url('http://new.cesi.ie/wp-content/uploads/2014/01/presentation-icon.png');
display: block;
height: 29px;
width: 23px;
}
I just can't get the icons to appear. I was told as it was a nested repeater field:
"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."
But I'm new to php so I just need a help doing this!
Here's the code:
<!-- 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 -->
The site is user and password protected and won't be going live for a while. If I need to post up more code, that's no problem.
Answers (3)
Hariprasad Vijayan answers:
Hello,
Can you provide page URL and credentials to check?
Ailsa Craig comments:
Hi,
The page is
http://new.cesi.ie/events_programme/fake-conference-2014/
username: newcesisite
password: cesi2013
Hariprasad Vijayan comments:
Hello,
Make sure 'event_type' is not empty for http://new.cesi.ie/events_programme/fake-conference-2014/. Currently the class is like "icon-" and the event_type is missing here. Let me know.
Hariprasad Vijayan comments:
If it is not empty,
Change the code
<?php
$type = get_sub_field(‘event_type’);
?>
to
$type = get_post_meta( get_the_ID(), 'event_type', 'true' );
Let me know it is working.
Ailsa Craig comments:
Hi,
That makes no difference I'm afraid!
Ailsa Craig comments:
Sorry just saw your first mail there. The 'event_type' is empty because it's a variable. If it's a 'presentation' it should throw up the presentation icon and so on. If I make this field 'icon-presentation' they will all be presentations which I don't want (I tried this and the icon does show up). It's the variable part that's the problem for me. That is if i understand you correctly.
Thanks!
Hariprasad Vijayan comments:
Hi.
Can you join in skype? i hope you have my skype id
Thanks
Hariprasad Vijayan comments:
<blockquote>The 'event_type' is empty because it's a variable</blockquote>
It should not be empty it should have "presentation" or "workshop" or "break". Please add "presentation" for "event_type" from dashboard and check.
Ailsa Craig comments:
Hi,
Yes indeed I have your skype id
Hariprasad Vijayan comments:
Fixed.
Ryan S answers:
Do you work this online? if so can you send me the site url so I can investigate to it directly instead?