WordPress and Design Tidbits

July 24th 2011 / 7 minutes to read

blog-wp

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 &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>
</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)); ?>&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.

Notes

Likes I doubled-down on RSS by Eric Bailey.

View All Notes

Subscribe

Reading

Jams

Album Art for Shiver

Shawn Desman

Shiver

Album Art for Lay Your Hands

Simon Webbe

Lay Your Hands

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.

Lindsay

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

Reply to Lindsay
Jenn

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

Jenn

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

Jenn

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.

To respond via your own website, enter the URL of your response which should contain a link to this post's permalink URL.
Your response will then appear on this post.