wordpress twentyseventeen social media share icons without plugin advice needed.

Question

I was curious if this would a best practice to add social media SVG icons to page and post types ( without using a plugin)?

I have added three custom fields to WordPress page and post. facebook, twitter and google plus fields I have added the WordPress provided SVG tags specific to each social media site. wordpress page admin screenshot

here is the code that I have added to my front page where I need the social share icons to be added

<header class="entry-header-hp">
                    <div class="page-title-homepage">
                    <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
                    <nav class="social-naviation-news" role="navigation">
                        <div>
                            <ul>
                                <li>
                                    <a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo urlencode(get_permalink()); ?>" target="_blank"><?php echo the_field('facebook'); ?>
                                     </a>
                                </li>
                                <li>
                                    <a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>+<?php echo get_permalink(); ?>" target="_blank">
                                   <?php echo the_field('twitter'); ?>
                                    </a>
                                </li>
                                <li>
                                   <a href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">
                                   <?php echo the_field('Google'); ?>
                                    </a>
                               </li>
                            </ul>
                        </div>
                     </nav>
                    </div>
                    <div class="entry-meta">
                        <?php echo the_modified_date(); ?>
                    </div><!-- .entry-meta -->
                    <div class="edit-link">
                    <?php twentyseventeen_edit_link( get_the_ID() ); ?>
                    </div>
                </header><!-- .entry-header -->

As you can see the icons will display on the front page. https//staging.rockimages.com

Is this a good approach or will this cause any problems down the line?

Musk Musk · Accepted Answer · 2017-10-24T17:09:19

It wouldn't cause problem down the line but i recommend you structure the sharing element in a way that is re-usable and doesn't require bulk change on multiple pages templates. So basically make a function out of it and place it in your functions.php file of your theme. Also if you use any default Wordpress theme makes sure you copy the original and rename it or create a child theme.

Ref:

https://premium.wpmudev.org/blog/five-hacks-twenty-seventeen/#social https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

wordpress twentyseventeen social media share icons without plugin advice needed.

1 Answers