OSN Header

WordPress and Design Tidbits


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!

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

Subscribe to Weekly Posts & snippets


Spring Equinox

A blessed Ostara / Spring Equinox / First Day of Spring to you!

Small OSN Refreshes

Changed the following to OSN:

Another Good Show

Wow, ABC is on a roll with the new shows lately! I really enjoyed The Company You Keep.

Click to Skip to comment form

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?

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

posted on July 24th 2011 at 12:53PM CDT

Oh nvm I found it… single.php right?

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.

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

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

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.

posted on October 9th 2011 at 2:26PM CDT

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

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!

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!

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

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!

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!

posted on October 9th 2011 at 4:32PM CDT

I think I fixed the displaying of MY twitterID issue.

Leave a Comment

Thank you for your comment!
Read the Comment Policy.

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

Powered by &
privacy policy / disclaimer