Using custom fields to display social icons

  • danielmck

    (@danielmck)


    14 years, 9 months ago

    Hi, i’m very new to php and wordpress development so
    on my site in development each ‘post’ is a review of a different website, on each ‘post’ there is an ‘about’ and then i want to have a section with the websites social profiles etc, i want to show
    the icon of there social page only if they have one and then nothing if they don’t, each post will have unique profile links so i guessed that customfields would be my best bet and using php to display them or not, after a bit of researching on how to do this with custom fields i came up with the following code which works a treat:

    <?php if(get_post_meta($post->ID, 'facebook', true) ||
	 get_post_meta($post->ID, 'twitter', true) ||
	 get_post_meta($post->ID, 'youtube', true)
	 ): ?>

	<ul>
		<?php if(get_post_meta($post->ID, 'facebook', true)): ?>
		<li><a href="<?php echo get_post_meta($post->ID, 'facebook', true); ?>">
        <img src="<?php bloginfo('stylesheet_directory'); ?>/icons/facebook-icon.jpg" alt="Facebook page" /></a></li>
		<?php endif; ?>

        <?php if(get_post_meta($post->ID, 'twitter', true)): ?>
		<li><a href="<?php echo get_post_meta($post->ID, 'twitter', true); ?>">
        <img src="<?php bloginfo('stylesheet_directory'); ?>/icons/twitter-icon.jpg" alt="Twitter page" /></a></li>
		<?php endif; ?>

		<?php if(get_post_meta($post->ID, 'youtube', true)): ?>
		<li><a href="<?php echo get_post_meta($post->ID, 'youtube', true); ?>">
        <img src="<?php bloginfo('stylesheet_directory'); ?>/icons/youtube-icon.jpg" alt="Youtube profile" /></a></li>
		<?php endif; ?>
    </ul>

<?php endif; ?>

    It will be alot of code once i get all the social profiles included so i’m wondering is there an easier way to do it?

    Thanks
    Daniel

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter danielmck

    (@danielmck)

    14 years, 9 months ago

    Anybody?

    Anonymous User

    (@anonymized-126485)

    14 years, 9 months ago

    You could setup an array of the various website names and use a loop.

    Also, letting folks put any arbitrary URL which will look like an official link, is probably a Bad Idea.

    Thread Starter danielmck

    (@danielmck)

    14 years, 9 months ago

    Hi wlindley

    You could setup an array of the various website names and use a loop.

    Could you go a bit more indepth on this, i don’t really how this would be done.

    Also, letting folks put any arbitrary URL which will look like an official link, is probably a Bad Idea.

    The way i’m doing it is the ‘user’ will fill out a form with all the necessary info and i will write it in manually, i have an image
    of how my post displays at the moment but i don’t know how to upload it here lol

    Thread Starter danielmck

    (@danielmck)

    14 years, 9 months ago

    Heres the cap on imageshack
    http://img842.imageshack.us/img842/9055/socialside.jpg

    I input the custom fields and the icon for that social profile shows

    Anonymous User

    (@anonymized-126485)

    14 years, 9 months ago

    Something like this, perhaps.

    <?php
  $social_sites = array('facebook' => 'Facebook page', 'twitter' => 'Twitter page', 'youtube' => 'YouTube profile');
  $has_social = false;
  foreach (array_keys($social_sites) as $sk) {
    if (get_post_meta($post->ID, $sk, true)) {
      $has_social = true;
      break;
    }
  }
  if ($has_social) {
    print "<ul>\n";
    foreach ($social_sites as $sk => $s_title) {
      if (get_post_meta($post->ID, $sk, true)) {
	print '<li><a href="' . get_post_meta($post->ID, $sk, true) . '"><img src="' .
          bloginfo('stylesheet_directory') . "/icons/{$sk}-icon.jpg\" alt=\"{$s_title}\" /></a></li>\n";
      }
    }
    print "</ul>\n";
  }
?>
    Thread Starter danielmck

    (@danielmck)

    14 years, 9 months ago

    Thanks wlindley for the help,

    Can you explain to me how i would use this code?
    Is it simply just replacing my php with the code
    you reccomended or is there more i need to do to make it work?

    Daniel

    Anonymous User

    (@anonymized-126485)

    14 years, 9 months ago

    Please elaborate. Did you read the code, do you understand what it is doing and why? What further would you like to do?

    Thread Starter danielmck

    (@danielmck)

    14 years, 9 months ago

    As i said i don’t know much about php,
    but it looks like it’s doing the same thing as my code
    except alot better,
    the second part of your code will show each profile if it exists,
    just with one bit of code,
    instead of my code which was to show each profile with the same code
    repeated for each profile name which would be alot of code.

    What i was wondering was does it stil use the custom fields, but now
    after reading through it again i realise that the first bit of your
    code is using the custom fields.
    I hope i’ve understood it properly??

    I haven’t been able to try your code out yet, but i will be back
    at my own computer tomorrowand will let you know how it goes.

    Thanks
    Daniel

    Anonymous User

    (@anonymized-126485)

    14 years, 9 months ago

    Yes, you are correct. I recommend Sklar’s “Learning PHP 5”

    Thread Starter danielmck

    (@danielmck)

    14 years, 9 months ago

    Will defo have a look at that book, thanks.

    I’ve just tried out the code, it half works,
    each social comes up like this(using facebook as an example:

    mysite/wp-content/themes/mythemeFacebook profile

    on the webpage it shows that url then the facebook link right on the end, it links to the correct url.

    All that is wrong is that the icon doesn’t show and my theme location url shows.
    If it matters i’m creating a child theme using bones.

    Daniel

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Using custom fields to display social icons’ is closed to new replies.