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!
The CSS
#prettycomment textarea {background:transparent;border:none;position:relative; margin: 30px 10px 0 120px; width:360px; height: 200px;color:#574a49;}
#prettycomment {background: url(https://onestarrynight.com/wp-content/themes/june/img/comment-box.png) no-repeat; width: 541px; height: 252px;}
.prettyinput {background: url(https://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 »'); ?></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>
</div>
<br />
<div class="prettysubmit"><input name="submit" type="image" src="https://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; ?>" />
</div>
<br />
<?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>
</form>
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>
StumbleUpon
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
Tumblr
<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>
Pinterest
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:
<g:plusone></g:plusone>
Like on Facebook
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&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!
![Album Art for Thinking of You (I Drive Myself Crazy) [remix]](https://lastfm.freetls.fastly.net/i/u/174s/d239eabfe8b7164ecccae29c9c5df203.jpg)
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?
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
Oh nvm I found it… single.php right?
Yep! If you want it on all individual posts that may or may not have comments, single.php is the best way to go.
There’s also a WP plugin for adding your Google +1 button– it’s a bit more user-friendly for beginners! :)
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! :)
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.
I don’t have it set to display the twitter ID lol!
It should show it now if you comment and re-enter it as I cleared my table, LOTS of spam entries in there geez!
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!
Oh! But now that I commented, it is indeed showing *my* Twitter ID! Ahhh! You rock. :D
<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!
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!
I think I fixed the displaying of MY twitterID issue.