Most of the people use WordPress to create free and simple WordPress sites. As an ardent WordPress user, you would like to customize your site and control it fully when the user count starts to grow. Fortunately, WordPress has compartmentalized architecture and flexible structure that helps you to change almost all things on your site and make it look the way you want.
Among the website control tools, custom page templates are the most important apparatus. In this write-up, we will talk about top 10 tips to optimize the custom WordPress Themes easily and customize your site. Let’s get started.
Caution: When you work with templates, you have to edit and change files in your active theme. Therefore, it is always important to use a child theme while making these types of customizations. It helps to avoid the risk of overwritten changes when you update the parent theme.
1. To Add Logo To Sign-In Page
In order to add a logo to the log-in page for admins, you must use login_head action hook. It easily performs all actions associated with the log-in the page’s head element. To do this, you need to perform two actions- (A) change the logo and change the link that points to it.
[code language=”php”]add_action( ‘login_head’, ‘ilc_custom_login’);
function ilc_custom_login() {
echo ‘
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20h1%20a%20%7B%20background-image%3Aurl(‘.%20get_stylesheet_directory_uri()%20.%20’%2Fimages%2Flogin-logo.png’%20.%20′)%20!important%3B%20margin-bottom%3A%2010px%3B%20%7D%0A%20padding%3A%2020px%3B%7D%0A%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3Ewindow.onload%20%3D%20function()%7Bdocument.getElementById(%22login%22).getElementsByTagName(%22a%22)%5B0%5D.href%20%3D%20%22′.%20home_url()%20.%20’%22%3Bdocument.getElementById(%22login%22).getElementsByTagName(%22a%22)%5B0%5D.title%20%3D%20%22Go%20to%20site%22%3B%7D%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />’;
}
[/code]
Once you perform the above-mentioned action, the CSS code will replace the WordPress logo with your logo. Based on your needs, you can make adjustment to the image in the fourth line of the code to suite the theme you are using on your site.
2. To Display Social Sharing Links
To add social sharing links to your post, you can use the following code:
[code language=”php”]add_filter( ‘the_content’, ‘ilc_share’ );
function ilc_share( $content ) {
global $post;
$postlink = get_permalink($post->ID);
$posttitle = get_the_title($post->ID);
$html = ‘
<ul class="share-entry">’;
// Twitter
$html .= ‘
<li><a class="share-twitter" title="Share on Twitter" rel="external" href="http://twitter.com/share?text=’.$posttitle.’&url=’.$postlink.’">Share on Twitter</a></li>
‘;
// Facebook
$html .= ‘
<li><a class="share-facebook" title="Share on Facebook" rel="external" href="http://www.facebook.com/share.php?u=’ . $postlink . ‘">Share on Facebook</a></li>
‘;
// LinkedIn
$html .= ‘
<li><a class="share-linkedin" title="Share on LinkedIn" rel="external" href="http://www.linkedin.com/shareArticle?mini=true&url=’ . $postlink . ‘&title=’ . $posttitle . ‘">Share on LinkedIn</a></li>
‘;
// Digg
$html .= ‘
<li><a class="share-digg" title="Share on Digg" rel="external" href="http://digg.com/submit?url=’ . $postlink . ‘">Share on Digg</a></li>
‘;
// StumbleUpon
$html .= ‘
<li><a class="share-stumbleupon" title="Share on StumbleUpon" rel="external" href="http://www.stumbleupon.com/submit?url=’ . $postlink . ‘&title=’ . $posttitle . ‘">Share on StumbleUpon</a></li>
‘;
// Google+
$html .= ‘
<li><a class="share-googleplus" title="Share on Google+" rel="external" href="https://plusone.google.com/_/+1/confirm?url=’ . $postlink . ‘">Share on Google+</a></li>
‘;
$html .= ‘</ul>
‘;
return $content . $html;
}
With this code, you can add links to the full view for posts and on the archive pages. In case, you want to display them only in the full view for posts, then you should add the following before the global $post
[code language=”php”]if( !is_singular() ) return $content;
[/code]3. Display Content Only To Logged-In Users
For this, you need to use the following code:
[code language=”php”]add_shortcode( ‘loggedin’, ‘ilc_loggedin’ );
function ilc_loggedin( $atts, $content = null ) {
if( is_user_logged_in() ) return ‘
‘ . $content . ‘
‘;
else return;
}
4. Display Content Only To RSS Subscribers
You can use this technique to increase the number of RSS subscribers. To display content only to the RSS subscribers, use the following code:
[code language=”php”]add_shortcode( ‘feedonly’, ‘ilc_feedonly’ );
function ilc_feedonly( $atts, $content = null ) {
if( is_feed() ) return ‘
‘ . $content . ‘
‘;
else return;
}
5. To Display The Featured Image In Feed
In order to encourage RSS subscribers to visit your website regularly, you can think of taking this action. For this, you should use the following code:
[code language=”php”]add_filter(‘the_content_feed’, ‘rss_post_thumbnail’);
function rss_post_thumbnail($content) {
global $post;
if( has_post_thumbnail($post->ID) )
$content = ‘
‘ . get_the_post_thumbnail($post->ID, ‘thumbnail’) . ‘
‘ . $content;
return $content;
}
6. To Redirect WordPress Feeds To FeedBurner
Some WordPress users want to get statics about their subscribers. They can do so by using the FeedBurner of similar services. In order to redirect your feed, you need to use the following snippet:
[code language=”php”]add_action(‘template_redirect’, ‘ilc_rss_redirect’);
function ilc_rss_redirect() {
if ( is_feed() && !preg_match(‘/feedburner|feedvalidator/i’, $_SERVER[‘HTTP_USER_AGENT’])){
header(‘Location: http://feeds.feedburner.com/xyz’);
header(‘HTTP/1.1 302 Temporary Redirect’);
}
}
7. To Eliminate Elements from the header
WordPress outputs a number of things in the head section, such as the wlwmanifest link, RSD link and generator meta tag. For a number of users, these elements are not useful.
[code language=”html”]<meta name="generator" content="WordPress 3.2.1">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml">
If you don’t want to use XML-RPC functionality, then you should remove the RSD link. In the same way, if you don’t wish to use Windows Live Write, just remove the 3 elements. You can do so by using that code:
[code language=”php”]add_filter(‘the_generator’, create_function(”, ‘return "";’));
remove_action(‘wp_head’, ‘rsd_link’);
remove_action(‘wp_head’, ‘wlwmanifest_link’);
8. To locate Safari On iOS
These days, webmasters provide the mobile versions of their sites with the use of different techniques. WordPress allows you to easily check the mobile Safari browser, which helps you to know when visitors access your site using an iPhone or iPad. You can use the following code to perform this action.
[code language=”php”]add_action(‘wp_print_styles’, ‘ilc_enqueue_styles’);
function ilc_enqueue_styles(){
global $is_iphone;
if( $is_iphone ){
wp_enqueue_style(‘iphone-css’, get_stylesheet_directory_uri() . ‘/iphone.css’ );
}
else{
wp_enqueue_style(‘common-css’, get_stylesheet_directory_uri() . ‘/common.css’ );
}
}
Here, you can use the standard WordPress function wp_enqueue_style to add styles to the head element of the web pages.
9. To Add A Favicon With The Help Of A WordPress Hook
Hooks gives a lot of flexibility to users as it allows them to insert the custom code without touching the template. If you want to add a favicon to your site without changing the header.php file, just use the following function into the wp_head hook
[code language=”php”]add_action( ‘wp_head’, ‘ilc_favicon’);
function ilc_favicon(){
echo "<link rel=’shortcut icon’ href=’" . get_stylesheet_directory_uri() . "/favicon.ico’ />" . "n";
}
10. To Restrict The Excerpt’s Word Count
When you use too many words before multiple tags on WordPress, it creates problems for you. The manual process of creating excerpts for all of those posts is a time consuming work. So, to restrict the excerpt’s word count, you can use the following code:
[code language=”php”]add_filter(‘excerpt_length’, ‘ilc_excerpt_length’);
function ilc_excerpt_length( $length ){
return 10;
}
Final Words
These are the top 10 tips to optimize custom WordPress templates. Just use them carefully and make the necessary changes in your WordPress sites to attract more visitors and lift your web-based business.