#sidebar.php

[bestseotoolsfree]

New Post has been published on Devtoolsplus

New Post has been published on http://www.devtoolsplus.com/how-to-display-random-posts-with-thumbnails-in-wordpress/

How to Display Random Posts with Thumbnails in WordPress

In this tutorial I will explain how to display random post with thumbnails in WordPress sidebar, footer or other place. Especially where you want. This tutorial will help you avoiding plugins to display random posts with thumbnails. After complete the below steps your random post sidebar widgets will like the below image. After refreshing your page the post will change. Let’s started!

wordpress random post code

Setp 1: Add Thumbnail Feature with post

Make sure your WordPress theme has supported WordPress featured image in your post. If you don’t clear about WordPress Featured image you can check it from post editor under Tags like the image below.

WordPress random post thumbnail

If your theme doesn’t support that feature image, you can add this very easily by adding some codes in your template’s functions.php file. You can see How to add Featured image in wordpress ? for more details of adding featured image in your theme.

Add the below codes in functions.php file and check your post or page editor. Your will see The Featured Image option like the above image.

<?php if ( function_exists("add_theme_support") ) { add_theme_support("post-thumbnails"); } ?>

Setp 2: Display randmo Posts with Thumbnails

Now I will provide your some PHP codes which will create random posts with thumbnail image. Open your sidebar.php file and add the codes below where you want to display random post with thumbnail image.

<div class="widget"> <h3 class="widgettitle">Random Post</h3> <div class="text-widget"> <div class="fimage-post"> <ul> <?php query_posts('showposts=5&offset=0&orderby=rand'); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li> <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?> <a style="display:block; font-weight:bold;" href="<?php the_permalink(); ?>"><?php echo substr(strip_tags(get_the_title()),0,26); ?>[...]</a> <?php echo substr(strip_tags(get_the_content()),0,62); ?> </li> <?php endwhile;?> </ul> </div> </div> </div>

Now you will be able to display thumbnail image with random post title. Now need to add some style to design the random post. After adding some CSS I will explain the above codes.

Setp 3: Stylization of Random Posts with Thumbnails

Now open your template’s style.css file and add the codes

.widget { margin: 0 0 20px; padding:10px; overflow:hidden; background:#eee; border:1px solid #ddd; } h3.widgettitle { font-size:12pt; letter-spacing:0; padding: 0 0 5px; border-bottom:1px dotted #ccc; margin-bottom:10px; } .fimage-post { background:#ffffff; padding:10px; } .fimage-post a { float: none; } .fimage-post img { float: left; margin: 4px 4px 0 0; } .fimage-post .clear { clear: both; } .fimage-post ul { list-style:none !important; margin:0 !important; padding:0 !important; } .fimage-post li { background: none repeat scroll 0 center transparent; border-bottom: 1px dotted #AAAAAA; list-style: none outside none !important; margin: 0 !important; padding: 10px 0; }

Explanation of Random Posts with Thumbnails in WordPress

The tag <h3> is for widget title

<?php query_posts('showposts=5&offset=0&orderby=rand'); ?> is to make new post query, we use 5 to display 5post. If you want to display more, use your number. rand mean post will change after page reload.

The tag <div class=” fimage-post”> is for post title container with their thumbnails

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?> here first 50 mean image width and last 50 mean image height. You can change it with your own size.

substr(strip_tags(get_the_title()),0,26); is showing 26 character of your title. You can use your own character size.

substr(strip_tags(get_the_content()),0,62); is showing 62 character of your post details. You can use your own character size. Here I can use <?php the_excerpt(); ?> to display post description. But it would be ugly.

wp_reset_query(); is to reset a new query made earlier.

At this same way you can Display Recent Posts with Thumbnails in WordPress

[bestseotoolsfree]

New Post has been published on Devtoolsplus

New Post has been published on http://www.devtoolsplus.com/how-to-display-random-posts-with-thumbnails-in-wordpress/

How to Display Random Posts with Thumbnails in WordPress

In this tutorial I will explain how to display random post with thumbnails in WordPress sidebar, footer or other place. Especially where you want. This tutorial will help you avoiding plugins to display random posts with thumbnails. After complete the below steps your random post sidebar widgets will like the below image. After refreshing your page the post will change. Let’s started!

wordpress random post code

Setp 1: Add Thumbnail Feature with post

Make sure your WordPress theme has supported WordPress featured image in your post. If you don’t clear about WordPress Featured image you can check it from post editor under Tags like the image below.

WordPress random post thumbnail

If your theme doesn’t support that feature image, you can add this very easily by adding some codes in your template’s functions.php file. You can see How to add Featured image in wordpress ? for more details of adding featured image in your theme.

Add the below codes in functions.php file and check your post or page editor. Your will see The Featured Image option like the above image.

<?php if ( function_exists("add_theme_support") ) { add_theme_support("post-thumbnails"); } ?>

Setp 2: Display randmo Posts with Thumbnails

Now I will provide your some PHP codes which will create random posts with thumbnail image. Open your sidebar.php file and add the codes below where you want to display random post with thumbnail image.

<div class="widget"> <h3 class="widgettitle">Random Post</h3> <div class="text-widget"> <div class="fimage-post"> <ul> <?php query_posts('showposts=5&offset=0&orderby=rand'); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li> <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?> <a style="display:block; font-weight:bold;" href="<?php the_permalink(); ?>"><?php echo substr(strip_tags(get_the_title()),0,26); ?>[...]</a> <?php echo substr(strip_tags(get_the_content()),0,62); ?> </li> <?php endwhile;?> </ul> </div> </div> </div>

Now you will be able to display thumbnail image with random post title. Now need to add some style to design the random post. After adding some CSS I will explain the above codes.

Setp 3: Stylization of Random Posts with Thumbnails

Now open your template’s style.css file and add the codes

.widget { margin: 0 0 20px; padding:10px; overflow:hidden; background:#eee; border:1px solid #ddd; } h3.widgettitle { font-size:12pt; letter-spacing:0; padding: 0 0 5px; border-bottom:1px dotted #ccc; margin-bottom:10px; } .fimage-post { background:#ffffff; padding:10px; } .fimage-post a { float: none; } .fimage-post img { float: left; margin: 4px 4px 0 0; } .fimage-post .clear { clear: both; } .fimage-post ul { list-style:none !important; margin:0 !important; padding:0 !important; } .fimage-post li { background: none repeat scroll 0 center transparent; border-bottom: 1px dotted #AAAAAA; list-style: none outside none !important; margin: 0 !important; padding: 10px 0; }

Explanation of Random Posts with Thumbnails in WordPress

The tag <h3> is for widget title

<?php query_posts('showposts=5&offset=0&orderby=rand'); ?> is to make new post query, we use 5 to display 5post. If you want to display more, use your number. rand mean post will change after page reload.

The tag <div class=” fimage-post”> is for post title container with their thumbnails

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?> here first 50 mean image width and last 50 mean image height. You can change it with your own size.

substr(strip_tags(get_the_title()),0,26); is showing 26 character of your title. You can use your own character size.

substr(strip_tags(get_the_content()),0,62); is showing 62 character of your post details. You can use your own character size. Here I can use <?php the_excerpt(); ?> to display post description. But it would be ugly.

wp_reset_query(); is to reset a new query made earlier.

At this same way you can Display Recent Posts with Thumbnails in WordPress

[bestseotoolsfree]

New Post has been published on Devtoolsplus

New Post has been published on http://www.devtoolsplus.com/how-to-add-login-form-on-wordpress-theme/

How to add login form on WordPress Theme?

Some bloggers want to add login form on WordPress theme for their author. Especially multiply author blogs need a Login form. To create or add login form on WordPress theme is not hard. Simply paste the following code where you would like to display your login form. You may add this login form codes in your sidebar.php file or create a page template.

<?php if (!(current_user_can('level_0'))){ ?> <h2>Login</h2> <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post"> <input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" /> <input type="password" name="pwd" id="pwd" size="20" /> <input type="submit" name="submit" value="Login" class="button" /> <p> <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label> <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" /> </p> </form> <a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a> <?php } else { ?> <h2>Logout</h2> <a href="<?php echo wp_logout_url(urlencode($_SERVER['REQUEST_URI'])); ?>">logout</a><br /> <a href="http://www.your-domain-name/wp-admin/">admin</a> <?php }?>

Find <a href="http://www.your-domain-name/wp-admin/">admin</a> and add your site admin url for redirect loged user to admin panel.

So now you know how easy to create a login form in WordPress theme without using any plugin.

Now you can add some css for adding style for your new created login from.

[bestseotoolsfree]

New Post has been published on Devtoolsplus

New Post has been published on http://www.devtoolsplus.com/display-recent-posts-with-thumbnails/

How to Display Recent Posts with Thumbnails in WordPress

In this tutorial I will explain how to display recent post with thumbnails in WordPress sidebar, footer or other place. Especially where you want. This tutorial will help you avoiding plugins to display recent posts with thumbnails. After complete the below steps your recent post sidebar widgets will like the below image. Let’s started!

Display Recent Posts with Thumbnails in WordPress

 Setp 1: Add Thumbnail Feature with post

Make sure your WordPress theme has supported WordPress featured image in your post. If you don’t clear about WordPress Featured image you can check it from post editor under Tags like the image below.

If your theme doesn’t support that feature image, you can add this very easily by adding some codes in your template’s functions.php file. You can see How to add Featured image in WordPress ?

Add the below codes in functions.php file and check your post or page editor. Your will see The Featured Image option like the above image.

<?php if ( function_exists("add_theme_support") ) { add_theme_support("post-thumbnails"); } ?>

Setp 2: Display Recent Posts with Thumbnails

Now I will provide your some php codes which will call your recent posts with thumbnail image. Open your sidebar.php file and add the codes below where you want to display recent post with thumbnail image.

<div class="widget"> <h3 class="widgettitle">Recent Post</h3> <div class="text-widget"> <div class="fimage-post"> <ul> <?php $the_query = new WP_Query('showposts=5&orderby=post_date&order=DESC'); ?> <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> <li> <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?> <a style="display:block; font-weight:bold;" href="<?php the_permalink(); ?>"><?php echo substr(strip_tags(get_the_title()),0,26); ?>[...]</a> <?php echo substr(strip_tags(get_the_content()),0,62); ?> </li> <?php endwhile;?> </ul> </div> </div> </div>

Now you will be able to display thumbnail image with recent post title. Now need to add some style to design the recent post. After adding some CSS I will explain the above codes.

Setp 3: Stylization of Recent Posts with Thumbnails

Now open your template’s style.css file and add the codes

.widget { margin: 0 0 20px; padding:10px; overflow:hidden; background:#eee; border:1px solid #ddd; } h3.widgettitle { font-size:12pt; letter-spacing:0; padding: 0 0 5px; border-bottom:1px dotted #ccc; margin-bottom:10px; } .fimage-post { background:#ffffff; padding:10px; } .fimage-post a { float: none; } .fimage-post img { float: left; margin: 4px 4px 0 0; } .fimage-post .clear { clear: both; } .fimage-post ul { list-style:none !important; margin:0 !important; padding:0 !important; } .fimage-post li { background: none repeat scroll 0 center transparent; border-bottom: 1px dotted #AAAAAA; list-style: none outside none !important; margin: 0 !important; padding: 10px 0; }

Explanation of Recent Posts with Thumbnails in WordPress

The tag <h3> is for widget title

$the_query = new WP_Query('showposts=5&orderby=post_date&order=DESC'); is to make new post query, we use 5 to display 5post. If you want to display more, use your number. DESC mean Last post will show first. If you want to display your firs post or old post than you need to change DESC to ASC. The tag <div class=” fimage-post”> is for post title container with their thumbnails

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(50,50), array("class" => "")); } ?> here first 50 mean image width and last 50 mean image height. You can change it with your own size. substr(strip_tags(get_the_title()),0,26);> is showing 26 character of your title. You can use your own character size.

substr(strip_tags(get_the_content()),0,62);is showing 62 character of your post details. You can use your own character size. Here I can use <?php the_excerpt(); ?> to display post description. Buy it would ugly. wp_reset_query(); is to reset a new query made earlier.

Now you know how to display recent post with thumbnails in WordPress sidebar. Do you know how to display recent post with thumbnails in wordpress Footer? It easy only copy and past the sidebar widgets codes in your footer.php file.

I will try to show “How to Display Random Posts with Thumbnails in WordPress ” at my next WordPress tutorial.

[wordpressjournal]

Erste Schritte 0.1

Beschreibung: Alles wie hier, aber zwei Sidebars.

Das Einzige, worum ich mich hier kümmern musste war, herauszufinden, wie ich zwei Sidebars benutze. Das hab ich dann auch gemacht:

Zwei Sidebars

Im Prinzip muss man nur zwei Dateien erstellen. Zum Beispiel sidebar-left.php und sidebar-right.php. In meinem Beispiel unten sind es Sidebar small und big. Diese bindet man dann in die Seite ein. 

Traurigerweise werden sie aber nicht ordentlich angezeigt. Deshalb folgenden Schnipsel in die functions.php kopieren:

<?php if ( function_exists('register_sidebars') ) register_sidebars(2); ?>

Und in die Sidebars dann:

<div> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?> <?php endif; ?> </div>

bzw.

<div> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?> <?php endif; ?> </div>

Im index.php wird das so eingebunden:

<div id="sidebar" class="small"> <?php get_sidebar('small'); ?> </div> <div id="sidebar" class="big"> <?php get_sidebar('big'); ?> </div>

Und so sollte es eigentlich funktionieren. Hat es zumindest bei mir.

- blogohblog, Wordpress Codex: Get_Sidebar & Customizing Your Sidebar