WordPress and Design Tidbits

July 24th 2011 / 7 minutes to read


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(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 &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="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; ?>" />
<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!

This post is over a year old which means the content may be outdated or no longer accurate.

Hot Mess
Car Insurance
Playing Catch-Up
I Redesigned, Again
I Miss Site Skinning
Blogging 4-ever
Freebie Library
Night Agent
Link CSS Changes
Spring Equinox
Small OSN Refreshes
Another Good Show
OSN Changes
New Favorite Show



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! :)

Reply to Lindsay

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! :)

Reply to Jenn

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.

Reply to Jenn

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!

Reply to Jenn

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

Reply to Jenn

<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!

Reply to Jenn

I think I fixed the displaying of MY twitterID issue.

Leave a Comment

Thank you for your comment!
Please Read the Comment Policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.