WordPress Conditional Tag for Login Page

wordpress-logo-notext-rgb
WordPress have conditional tags. The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches

Following conditional tag is specific to Login Page, that is currently not available on WordPress Codex

if ( in_array( $GLOBALS['pagenow'], array( 'wp-login.php', 'wp-register.php' ) ) ) {
//Conditional statement here
}

Full Screen Background on WP Login Page

WordPress - the logo

The following function add full screen background on WP Login page

1. Open functions.php in your theme directory

2. Add this function to functions.php


// LOGIN - full background
function my_login_style() {
?>
<style type="text/css">
 body.login {
 background:url('http://yourwebsiteaddress.com/wp-content/uploads/wploginbg.jpg') no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 position:fixed;
 top:0;
 left:0;
 z-index:10;
 overflow: hidden;
 width: 100%;
 height:100%;
 }

</style>
<?php
}
add_action('login_head', 'my_login_style');
?>

3. Save

Override CSS property right to left

 

This case is an example on how to override CSS property right to left

We have this AdSense banner floating on the right side of the screen. What if you want to change it to the left
Recently, I installed Floating AdSense plugin for WordPress. It’s very helpful to add AdSense banner floating on the site.
However, this plugin floats the banner automatically on the right. Somehow, when the float option changed to left, it doesn’t work

The original code is look alike this one

#ad_divRight {
overflow: hidden;
border: 2px solid #3c95d9;
background-color: #fff;
right: 0px;
position: fixed;
top: 5%;
margin-left: 0px;
float: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #ffffff;
padding: 0 0 2px 0;
z-index: 10;
}

See right:0 , this forces banner ad to the right corner of the screen/site. We can override this alignment to the left with CSS with this code

#ad_divRight { left: 0 !important; right: auto !important; }

How to add ‘Show Thumbnail’ option in WPZOOM Featured Category Widget

WPZOOMFeaturedCategoryTribune is a lovely magazine theme from WPZOOM. The theme has custom widgets name WPZOOM Featured Category Widget
You could use this widget to display categories on homepage like the demo site (Politics – World – Sports – Automotive). The widget show thumbnails by default, it doesn’t have feature to disable that. What if you want a feature that allow you to show thumbnails for a category, but not for others.
It takes a little bit customization to WPZOOM Featured Category Widget

1. Open featured-category.php in functions > theme > widgets > featured-category.php

2. Replace all code between <?php and ?> in featured-category.php with following code


/*------------------------------------------*/
/* WPZOOM: Featured Category widget */
/*------------------------------------------*/
$wpzoomColors = array();
$wpzoomColors['blue'] = 'Blue';
$wpzoomColors['red'] = 'Red';
$wpzoomColors['black'] = 'Black';
class wpzoom_widget_category extends WP_Widget {

/* Widget setup. */
 function wpzoom_widget_category() {
 /* Widget settings. */
 $widget_ops = array( 'classname' => 'wpzoom', 'description' => __('Featured Category Widget for Homepage', 'wpzoom') );

/* Widget control settings. */
 $control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'wpzoom-widget-cat' );

/* Create the widget. */
 $this->WP_Widget( 'wpzoom-widget-cat', __('WPZOOM: Featured Category', 'wpzoom'), $widget_ops, $control_ops );
 }

/* How to display the widget on the screen. */
 function widget( $args, $instance ) {
 extract( $args );

/* Our variables from the widget settings. */
 $title1 = apply_filters('widget_title', $instance['title1'] );
 $color1 = $instance['color1'];
 $posts1 = $instance['posts1'];
 $show_thumb = $instance['show_thumb'] ? true : false;
 $category1 = get_category($instance['category1']);
 if ($category1) {
 $categoryLink1 = get_category_link($category1);
 }

/* Before widget (defined by themes). */
 //echo $before_widget;

$z = 0;
 while ($z < 1)
 {
 $z++;

$color = "color$z";
 $categoryLink = "categoryLink$z";
 $title = "title$z";
 $posts = "posts$z";
 $category = $instance["category$z"];
?>
 <?php

echo '<div class="homecat '.$$color.'">';

if ( $$title ) { echo '<h4><a href="'.$$categoryLink.'">'.$$title.'</a></h4>'; } ?>

<ul>

<?php
 $second_query = new WP_Query( array( 'cat' => $category, 'showposts' => $$posts, 'orderby' => 'date', 'order' => 'DESC' ) );

$i = 0;
 if ( $second_query->have_posts() ) : while( $second_query->have_posts() ) : $second_query->the_post();
 unset($image,$cropLocation);
 $i++;
 global $post;

?>
 <li>

<div class="thumb">

<?php

$permalink = get_permalink();
 $comments = get_comments_number();
 $comment_write = '<span class="meta">'.get_the_date().'<strong>'.$comments.'</strong></span>';

if ( $show_thumb ) {

 get_the_image( array( 'size' => 'featured-cat', 'width' => 200, 'height' => 125, 'before' => '<a href="'.$permalink.'">', 'after' => $comment_write.'</a>', 'link_to_post' => false ) );

}
 ?>

</div>

<h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>

<p><?php the_content_limit(95); ?></p>

</li>
 <?php endwhile; ?>
 <?php endif; ?>

</ul>
 <ul class="stories">

<?php
 $slidepost = new WP_Query( array( 'cat' => $category, 'showposts' => 3, 'offset' => $$posts, 'orderby' => 'date', 'order' => 'DESC' ) );

while ( $slidepost->have_posts() ) {
 $slidepost->the_post();
 ?><li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php
 }
 ?>

</ul>
 <?php echo '<a href="'.$$categoryLink.'" class="nextActions">'; _e('More in this category &rarr;', 'wpzoom'); echo '</a>'; ?>
 </div>

<?php

} // while
 echo ' <!-- end .featCategory -->';
 /* After widget (defined by themes). */
 //echo $after_widget;
 wp_reset_query();
 }

/* Update the widget settings.*/
 function update( $new_instance, $old_instance ) {
 $instance = $old_instance;

/* Strip tags for title and name to remove HTML (important for text inputs). */
 $instance['title1'] = strip_tags( $new_instance['title1'] );
 $instance['category1'] = $new_instance['category1'];
 $instance['color1'] = $new_instance['color1'];
 $instance['posts1'] = $new_instance['posts1'];
 $instance['show_thumb'] = $new_instance['show_thumb'];

return $instance;
 }

/** Displays the widget settings controls on the widget panel.
 * Make use of the get_field_id() and get_field_name() function when creating your form elements. This handles the confusing stuff. */
 function form( $instance ) {

/* Set up some default widget settings. */
 $defaults = array( 'title1' => __('Category Name', 'wpzoom'), 'category1' => '0', 'color1' => 'blue', 'posts1' => '3' );
 $instance = wp_parse_args( (array) $instance, $defaults );
 global $wpzoomColors;
 ?>

<p>
 <label for="<?php echo $this->get_field_id( 'title1' ); ?>"><?php _e('Category Title:', 'wpzoom'); ?></label>
 <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'title1' ); ?>" name="<?php echo $this->get_field_name( 'title1' ); ?>" value="<?php echo $instance['title1']; ?>" />
 </p>

<p>
 <label for="<?php echo $this->get_field_id('color1'); ?>"><?php _e('Title Background Color:', 'wpzoom'); ?></label>
 <select id="<?php echo $this->get_field_id('color1'); ?>" name="<?php echo $this->get_field_name('color1'); ?>" style="width:90%;">
 <?php
 foreach ($wpzoomColors as $key => $value) {
 $option = '<option value="'.$key;
 if ($key == $instance['color1']) { $option .='" selected="selected';}
 $option .= '">';
 $option .= $value;
 $option .= '</option>';
 echo $option;
 }
 ?>
 </select>
 </p>

<p>
 <label for="<?php echo $this->get_field_id('category1'); ?>"><?php _e('Category:', 'wpzoom'); ?></label>
 <select id="<?php echo $this->get_field_id('category1'); ?>" name="<?php echo $this->get_field_name('category1'); ?>" style="width:90%;">
 <option value="0">Choose category:</option>
 <?php
 $cats = get_categories('hide_empty=0');

foreach ($cats as $cat) {
 $option = '<option value="'.$cat->term_id;
 if ($cat->term_id == $instance['category1']) { $option .='" selected="selected';}
 $option .= '">';
 $option .= $cat->cat_name;
 $option .= ' ('.$cat->category_count.')';
 $option .= '</option>';
 echo $option;
 }
 ?>
 </select>
 </p>

<p>
 <label for="<?php echo $this->get_field_id('posts1'); ?>"><?php _e('Posts to show:', 'wpzoom'); ?></label>
 <select id="<?php echo $this->get_field_id('posts1'); ?>" name="<?php echo $this->get_field_name('posts1'); ?>" style="width:90%;">
 <?php
 $m = 0;
 while ($m < 11) {
 $m++;
 $option = '<option value="'.$m;
 if ($m == $instance['posts1']) { $option .='" selected="selected';}
 $option .= '">';
 $option .= $m;
 $option .= '</option>';
 echo $option;
 }
 ?>
 </select>
 </p>
 <p>
 <input class="checkbox" type="checkbox" <?php checked( $instance['show_thumb'], 'on' ); ?> id="<?php echo $this->get_field_id( 'show_thumb' ); ?>" name="<?php echo $this->get_field_name( 'show_thumb' ); ?>" />
 <label for="<?php echo $this->get_field_id( 'show_thumb' ); ?>">Display post thumbnail</label>
 </p>

<?php
 }
}

function wpzoom_register_category_widget() {
 register_widget('wpzoom_widget_category');
}
add_action('widgets_init', 'wpzoom_register_category_widget');

3. Select/Deselect Display Post Thumbnail on the widget
4. Done