Justin S. Lewis

WordPress Theme Developer

Several ways to customize the “Read More” in WordPress

March 8th, 2011 · Tutorials · → No Comments

Force the “read more” to display on pages.
Suppose you have created a page template that calls up a couple categories and you want them to display the read more link inside of the standard [...] that WordPress will insert if you use the_excerpt in your WordPress loop.
Stop the read more link from “jumping” when going to the post by adding this to your theme’s functions.php:

//remove read more jump
	function remove_more_jump_link($link) {
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

→ No CommentsTags:

Adding Social Media Buttons to your blog without a plugin

March 8th, 2011 · CSS, Functions, Tutorials · → No Comments

I don’t like using plugins for share buttons when I’m designing a WordPress theme. Instead, I add something like this to my functions.php:

   // social media
    	function custom_social_media_links() { ?>

    <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" title="Click to share this article on Facebook" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/facebook.png" alt="Share this article on Facebook" /></a> 

    <a href="http://twitter.com/home?status=<?php the_title(); ?> – <?php the_permalink(); ?>" title="Click to share this article on Twitter" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/twitter.png" alt="Share this Article on Twitter" /></a>

    <a href="http://reddit.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>"title="Click to share this article on Reddit" target="_blank" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/reddit.png" alt="Add this Article to Reddit"/></a> 

    <a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" title="Click to share this article on StumbleUpon" target="_blank" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/stumbleupon.png" alt="Add this Article to Stumbleupon" /></a> 

    <a href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink() ?>" title="Send this
    article to a friend!"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/email.png" alt="Email this Article to a friend" /></a>

Make sure your icons are located in your theme’s images folder. You can get some free icons here.

Then add this to your theme wherever you want the buttons to show up:

<?php custom_social_media_links(); ?>

You can wrap that last bit of code in a div and style it with CSS.

For example, I have placed my code with this:

 <p class="share"><strong>Share:</strong><?php custom_social_media_links(); ?> </p>

Styled it with this:

 .share {width:100%;
    	padding: 0.4em 0 0.4em 0;
    	font-size: 1.2em;
    	line-height: 1.6em;
    	color: #888;
    	clear: both;
    	border-bottom-width: thin;
    	border-bottom-style: solid;
    	border-bottom-color: #000000;
    }

So it looks like this:

You can add or remove any of the share links/icons you want by editing the function code above.

→ No CommentsTags:···

Customizing your WordPress dashboard without plugins: Part 1

March 5th, 2011 · CSS, Functions, Tutorials · → No Comments

Most WordPress users will probably never have a need to customize the WordPress dashboard other than with the built-in options WordPress already provides i.e. the Screen Options located at the top right of the dashboard and the Personal Options located on your Profile page. Those of us who use WordPress to build websites for clients often do have a need to customize the dashboard for our clients. When I first started out designing for clients I used the excellent Custom Admin Branding plugin. Recently, I’ve been trying to eliminate the need for as many plugins as possible. This post will deal with adding a custom logo to the header, custom header CSS, and a custom footer. The next post will demonstrate how to add or remove parts of the dashboard. All of these tricks require editing your theme’s functions.php. If your theme does not have this file you will need to create one.

First, create your custom logo. The image should be 32 by 32 pixels wide. Upload the image to your theme’s image folder. Add the following code to your theme’s functions.php.

//Dashboard Logo
add_action('admin_head', 'custom_dashboard_logo');

function custom_dashboard_logo() {
echo '<style>#header-logo {
 background-image: url(
 '.get_bloginfo ('template_directory').'/images/dashboard-logo.gif)
 !important; } </style>';
}

In my example, I named the image dashboard-logo.gif. You can name it whatever you want but make sure it matches the CSS.

How to customize your WordPress dashboard header CSS:

Open up your theme’s function.php and add the following code:

/* Change WordPress dashboard CSS */
function custom_colors() {
echo '<style>#wphead{background:#ffffcc;} #site-title{color:#000000;}</style>';
}
add_action('admin_head', 'custom_colors');

I used the #wphead and #site-title in my example but you can overwrite any of the header css with this function.
How to customize the footer text:

Add this to your theme’s functions.php.

//Dashboard Footer
function remove_footer_admin () {
    echo 'Powered by <a href="http://www.wordpress.org" target="_blank">WordPress</a> | Designed by <a href="http://www.yoursite.com" target="_blank">Your Name</a></p>';
    }

    add_filter('admin_footer_text', 'remove_footer_admin');

→ No CommentsTags:·