I recently received an email from a fellow Wordpress user who wanted to know how I customized my theme, Studiofolio. Well, here's a shout out to you, Gabriel. I thought I would just go ahead and post a description of all my modifications since I love to share. Studiofolio (now at v3.1.6) is a beautiful and well laid out theme. I am amazed at how well supported it is: more than a year later and the developers (Undsgn) are still hard at work improving it and answering our questions on the support forum. You can read about why I chose it in my article Wordpress Theme Reviews 2013. However, the Undsgn guys did a number of things that I don't like. I understand that they were trying to be helpful and innovative by building in their own comments system. They also used to have a function that would go in and strip out the standard media galleries, which played havoc with plugins that used the [ gallery ] tag, such as the ubiquitous Jetpack plugin. Luckily they seemed to realize in some cases that you shouldn't much with some of the low-level stuff, especially if you can't do it write. Still, there are a few things that remain vexing to me, either because they are just plain wrong (comments) or because of personal preference.
These are some of the modifications I've made. I recommend modifying the files by hand on your first time through. Whenever upgrades are released, you will need to modify the files again, but pay attention to whether or not the corresponding section has changed. I use the immensely helpful Sourcegear Diffmerge for this. Diffmerge allows you to compare whole directories of files. So in my left panel I specify the folder for the old Studiofolio (with my customizations of v3.1.5, for example) and in the right panel I specify the new version's folder (with the default v3.1.6 files). Diffmerge will then do its thing and tell you what has changed. You can check to see if your hacks have been affected: usually this is not the case and you can just right click each hack and tell it to propagate to the new file. Save the new files and upload them to your server. It's as easy as that! So let's begin.
editor-style.css
I find that some of my images display fine in the finished page, but the Wordpress editor let them overflow the column width. This resulted in the image extending beyond the editor width and off the page. It looked ugly, and was inaccurate. The following are my attempts to fix.
Append this to the end:
img { max-width: 500px; height: auto; }
.wp-caption { width: auto; max-width: 100%; }
comments.php
Find this block of text (from around lines 64-82)
<h3><?php comment_form_title(__('Leave a Reply', 'studiofolio'), __('Leave a Reply to %s', 'studiofolio')); ?></h3>
<p class="cancel-comment-reply"><?php cancel_comment_reply_link(); ?></p>
<?php if (get_option('comment_registration') && !is_user_logged_in()) : ?>
<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.', 'studiofolio'), wp_login_url(get_permalink())); ?></p>
<?php else : ?>
<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 <a href="%s/wp-admin/profile.php">%s</a>.', 'studiofolio'), get_option('siteurl'), $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php __('Log out of this account', 'studiofolio'); ?>"><?php _e('Log out »', 'studiofolio'); ?></a></p>
<?php else : ?>
<label for="author"><?php _e('Name', 'studiofolio'); if ($req) _e(' (required)', 'studiofolio'); ?></label>
<input type="text" class="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?>>
<label for="email"><?php _e('Email (will not be published)', 'studiofolio'); if ($req) _e(' (required)', 'studiofolio'); ?></label>
<input type="email" class="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?>>
<label for="url"><?php _e('Website', 'studiofolio'); ?></label>
<input type="url" class="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3">
<?php endif; ?>
<label for="comment"><?php _e('Comment', 'studiofolio'); ?></label>
<textarea name="comment" id="comment" class="input-xlarge" tabindex="4"></textarea>
<p class="form-btn"><input name="submit" class="btn btn-primary" type="submit" id="submit" tabindex="5" value="<?php _e('Submit Comment', 'studiofolio'); ?>"></p>replace it simply with:
<?php comment_form(); ?>
Next, find and delete this:
</form> <?php endif; // if registration required and not logged in ?>
socials.php
Undsgn has supports links to a lot of social media services that you might use, but any photographer running a business with Studiofolio will need a link to their Yelp page. I copied a Yelp badge and made some code for it in the header (which is called through socials.php). This displays fine in Chrome and Safari. It seemed to be a little weird in Internet Explorer, but really, who cares :)
Just look for where the <ul> list beings and add this (around line 9).
<ul> <li><a href="http://www.yelp.com/biz/etched-in-pixels-photography-menlo-park" target="_blank"><img alt="Yelp Badge" src=" YOUR YELP LOGO " width="40px" height="22px" /></a></li> </ul>
Wrap Up
That's about it for now. Please let me know if these were helpful. I also want to know if they didn't work for some reason! I look forward to your comments below.