OSN Header


I’ve had a few comments lately asking how to make a WordPress blog mobile and how I do my fancy comments form, so I’m sharing my tips and tricks!

Mobile Version

This is really the easiest to do because all you have to do is install a plugin! Here are my recommendations:

  • Wapple Architect: This is the plugin I currently use, I haven’t tweaked it TOO much but I do appreciate the ability to really go in and customize the features and CSS.
  • WordPress Mobile Pack: I’ve used this plugin in the past, it’s simple to use and the default theme works well enough. What’s nice is you can add your analytics / stats coding and it will track who vists the mobile version of your blog!
  • WordPress Mobile by Mobify: I used this for a brief time and although I LOVE the concept, it can be a bit complicated to use and customize.

How I Made My Awesome Comment Form

After creating the images in Photoshop to fit and work with your theme, it just takes a bit of CSS and tweaking of the comments.php template to make your comment form fabulous!


#prettycomment textarea {background:transparent;border:none;position:relative; margin: 30px 10px 0 120px; width:360px; height: 200px;color:#574a49;}
#prettycomment {background: url(http://onestarrynight.com/wp-content/themes/june/img/comment-box.png) no-repeat; width: 541px; height: 252px;}
.prettyinput {background: url(http://onestarrynight.com/wp-content/themes/june/img/input.png) no-repeat; width: 209px; height: 40px; padding-bottom:6px;float:left;margin-left: 40px;}
.prettyinput input {background:transparent; border:none;margin: 5px 0 0 12px; width:175px; height: 25px;color:#574a49; text-align:left; font-size:14px; overflow:hidden}
.prettylabel label {float:left;color:#574a49; font-size:18px; margin-left: 8px; margin-top:8px;}
.prettysubmit {color:#5e3269; font-size:24px; }

The Comment Form
This bit of code you place in your comments.php template, replacing the current form. Easiest way is just to replace everything from <form> to </form>.

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( is_user_logged_in() ) : ?>

<p><?php printf(__('Logged in as %s.'), '<a href="'.get_option('siteurl').'/wp-admin/profile.php">'.$user_identity.'</a>'); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out of this account') ?>"><?php _e('Log out &raquo;'); ?></a></p>
<?php else : ?>

<div class="prettyinput"><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /></div>
<div class="prettylabel"><label for="author"><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></label></div>
<div class="clears"></div>

<div class="prettyinput"><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /></div>
<div class="prettylabel"><label for="email"><?php _e('Mail');?> <?php if ($req) _e('(required)'); ?></label></div>
<div class="clears"></div>

<div class="prettyinput"><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /></div>
<div class="prettylabel"><label for="url"><?php _e('Website'); ?></label></div>
<div class="clears"></div>

<div class="prettyinput"><input type="text" name="atf_twitter_id" id="atf_twitter_id" value="" size="22" tabindex="3" /></div>
<div class="prettylabel"><label for="atf_twitter_id">Twitter ID</label></div>
<div class="clears"></div>
<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> <?php printf(__('You can use these tags: %s'), allowed_tags()); ?></small></p>-->
<br />

<div id="prettycomment" style="position:relative;margin:0 auto;">
<textarea name="comment" id="comment" cols="30" rows="5" tabindex="4"></textarea>
<br />
<div class="prettysubmit"><input name="submit" type="image" src="http://onestarrynight.com/wp-content/themes/june/img/submit-comment.png" id="submit" tabindex="5" value="<?php esc_attr_e('Submit Comment'); ?>" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<br />
<?php comment_id_fields(); ?>

<?php do_action('comment_form', $post->ID); ?>


I hope that helps, if you have any questions on the CSS or form, let me know.

Add Social Media and Share Buttons to Your Posts
As some of you know, I think it’s just downright WRONG to use a plugin when you can get the same end result using a small bit of code, using a ton of unnecessary plugins bloats your WordPress installation and can make it a bit slow. If I do use a plugin, I’ll link it below.

So here are the bits of code I use for the RT & Share area on my comments page!

Facebook Share
<script>var fbShare = {size: 'small',}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:129px; height:20px; background:url('http://platform.tumblr.com/v1/share_3.png') top left no-repeat transparent;">Share on Tumblr</a>

Since the code seems to be customized per the person’s account, you can get that from this link, Pinterest Goodies.

Google +1 Button

Inbetween your <head></head> tags in your header.php file, place this snippet:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Place this snippet where you want the actual button to appear:

Like on Facebook
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>

As always, if you have any issues, let me know!

If you ever have any WordPress or design questions you’d like answered, feel free to contact me!

has commented 29 times
posted on July 24th 2011 at 12:44PM CDT

Thank you!

I need to swap out my plugins and do the social media buttons manually. Which part of my template would I need to put my code to get the social stuff to appear at the bottom of each post?

has commented 3872 times
posted on July 24th 2011 at 12:49PM CDT

If you do ALL of them then I suggest either comments.php or single.php. If you do maybe 1-3 of them then you can also do it on index.php.

For me I have it all on my comments.php which I’ve shared here: Copy My Comments page

has commented 29 times
posted on July 24th 2011 at 12:53PM CDT

Oh nvm I found it… single.php right?

has commented 3872 times
posted on July 26th 2011 at 10:18AM CDT

Yep! If you want it on all individual posts that may or may not have comments, single.php is the best way to go.

has commented 1 times
posted on July 24th 2011 at 12:50PM CDT

There’s also a WP plugin for adding your Google +1 button– it’s a bit more user-friendly for beginners! :)

has commented 78 times
posted on October 9th 2011 at 2:24PM CDT

Surprise surprise, I found this post while searching for some Twitterlink Comments plugin help – namely, getting the Twitter ID to be displayed on the comment form once a user has inputted it. I love some of the ideas you have here – definitely bookmarking! :)

has commented 78 times
posted on October 9th 2011 at 2:24PM CDT

Interestingly, your form doesn’t appear to be showing my Twitter ID? Mine doesn’t either – a quirk? I’m going to submit this comment to see if it will be saved, heh.

has commented 3872 times
posted on October 9th 2011 at 2:26PM CDT

I don’t have it set to display the twitter ID lol!

has commented 3872 times
posted on October 9th 2011 at 3:15PM CDT

It should show it now if you comment and re-enter it as I cleared my table, LOTS of spam entries in there geez!

has commented 78 times
posted on October 9th 2011 at 4:03PM CDT

It’s listing *your* Twitter ID! LOL! Still, that’s a step in the right direction. I’m trying to use the code you commented on my blog with, but it’s not working. I think I have been staring at code too long. Halp? Would you be willing to send me a copy of *just* your Twitter ID input field from your comments page? I’ll give you a hugeeeeee shoutout in my next blog post!

has commented 78 times
posted on October 9th 2011 at 4:04PM CDT

Oh! But now that I commented, it is indeed showing *my* Twitter ID! Ahhh! You rock. :D

has commented 3872 times
posted on October 9th 2011 at 4:09PM CDT

<input type="text" name="atf_twitter_id" id="atf_twitter_id" value="<?php echo $comment->twitlinkid; ?>" size="22" tabindex="3" />

Weird that it was listing my twitterID? Ah well, as long as it works in the long run lol!

has commented 78 times
posted on October 9th 2011 at 4:13PM CDT

Oh wow. That is the *exact* code I’m using, yet it winds up showing just like that in the input, instead of the actual Twitter ID. Oh wells. I give up – at least it’s being retained for comments!

has commented 3872 times
posted on October 9th 2011 at 4:32PM CDT

I think I fixed the displaying of MY twitterID issue.