Does query_posts slows down WordPress?

A guy told me today on WordPress Answers (Stack Exchange), that query_posts() slows down your WordPress page load and recommended me to not using this function anymore. But how can I modify the WordPress loop without this function?

Let me know your answer!

Advertisements

WordPress archive page for multiple post types

If you want to make an archive page for multiple post types you want to show the title of the post type first. You can do that by using:

<?php post_type_archive_title(); ?>

http://codex.wordpress.org/Function_Reference/post_type_archive_title

For showing the content you can use the normal loop. But if you want to modify the loop by query_post(); you have to make a variable for ‘post_type’ that automatically fills in the right post type name.

You can do that by using the get_queried_object(); function:

http://codex.wordpress.org/Function_Reference/get_queried_object

As follows:

<?php
$obj = get_queried_object();
$post_type = $obj->name;
$args = array(
  'post_type' => $post_type,
  'orderby' => 'title',
  'order' => 'ASC',
  'posts_per_page' => 20,
 );
query_posts($args);
// And then the loop
?>

WordPress Alphabetical Glossary

I made this piece of code for a WordPress Alphabetical Glossary. It is a simple loop which makes a heading with the first character of the title, of the posts beginning with this character. Each group of posts gets a div called: “alpha_wrapper” around it, and the heading gets a class “alpha_title” so you can style it your own.

I made a alphabetical index too, so you can simply click to the right group of posts with the same first character. It is implemented in the Alphabetical Glossary loop. You can see that the headings with the class “alpha_title” have an ID corresponding with the character links in the “alphabetize” navigation.

<!-- The Alphabetical Index -->
<nav id="alphabetize">
  <?php foreach (range('a', 'z') as $char) { ?>
  <a href="#sort-<?php echo $char; ?>"><?php echo ucfirst($char); ?></a>
  <?php } ?>
  <div class="clear"></div>
</nav><!--End alphabetize-->

<!-- The Alphabetical Glossary -->
<div id="glossary">
if (have_posts()) { $curr_letter = ''; echo '<div class="alpha_wrapper">'; while (have_posts()) { the_post();
$title = get_the_title();
$title_array = explode(' ', $title);
$this_letter = substr($title_array, 0, 1);

   if ($this_letter != $curr_letter) {
      if (!empty($curr_letter)) {
      echo '<div class="clear"></div></div>
      <div class="alpha_wrapper">';
      }
   $curr_letter = $this_letter; ?> 
   <div id="sort-<?php echo strtolower($this_letter); ?>" class="alpha_title">
   <?php echo $this_letter; ?>
   </div><!--End alpha_title-->
   <?php } ?>

    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php } echo '</div>'; } ?>
</div><!--End glossary-->

If you have questions about it, please comment.

WordPress show author avatar

If you want to show the avatar of a WordPress author you can do this by:

First, get the author e-mail and put it in a variable:

<?php $user_email = get_the_author_meta('user_email'); ?>

And then, put this variable in the id_or_email parameter of the get_avatar(); function to distinguish which author you need, and echo the function out:

<?php echo get_avatar( $user_email, 80, $default, $alt ); ?>

More information about the get_avatar(); function: http://codex.wordpress.org/Function_Reference/get_avatar

Tip: I use the Worpress User Avatar plugin to upload a avatar picture to the author.

jQuery simple image gallery with thumbnails

Simple jQuery image gallery with thubmnails

I’ve searched the internet for a simple jQuery image gallery with thumbnails, without arrows, descriptions and ‘splashy’ effects. There are many websites with lots of gallery/slider plugins but all of them are not simple. So I decided to make one of my own which is very basic but can be expanded very simple!

My jQuery image gallery has:

  • 1 preview/big image
  • 3 vertical thumbnails
  • A smooth fade effect
  • Active class on the active thumbnail

My gallery is 470px wide and I made it on the WordPress way, with an array of 3 custom fields for the images. Naturally you can change this to what works for you.

The HTML:

<div id="image_gallery">

    <div id="current_image">
       <img id="above" width="370" src="<?php the_field('image_1'); ?>" /> 
       <img id="under" width="370" src="<?php the_field('image_2'); ?>" /> 
    </div><!--End current_image-->

    <div id="small_images">

       <?php $pictures = array('image_1', 'image_2', 'image_3'); ?>

       <?php foreach($pictures as $picture) : ?>

       <a class="small_image" rel="<?php the_field($picture); ?>"><img width="90" src="<?php the_field($picture); ?>" /></a>

       <?php endforeach; ?>

    </div><!--End small_images-->

</div><!--End image_gallery-->

The jQuery/Javascript:

<script>
$(document).ready(function () {
$("#small_images .small_image").first().addClass('active'); 

$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(600, function () {
$('#above').prop('src', $('#under').prop('src')).show();
});

$(".small_image.active").removeClass('active');
$(this).addClass('active');
});

}); 
</script>

The CSS:

#current_image{
 width:370px;
 height:245px;
 float:left;
 background:#CCC;
 overflow:hidden;
 position:relative;
}
#current_image img{
 min-height:100%;
 position: absolute;
 top: 0;
 left: 0;
}
#above {
 z-index:10;
}
#small_images{
 width:90px;
 height:245px;
 float:right; 
}
.small_image{
 width:90px;
 height:75px;
 display:block;
 background:#CCC;
 margin:0 0 10px 0;
 overflow:hidden;
 cursor:pointer; 
 opacity:0.4; 
}
.small_image img{
 min-height:100%; 
}
.small_image.active{
 opacity:1; 
}

WordPress Loop post count

If you want to count posts in the WordPress loop to, for example, add a class to the last post (to style it, for example with a float:right;), do the following:

  1. Start with the normal WordPress loop, and in my example a simple Div.
  2. Create a variable: “post_counter” and set it equal to 0 and place it above the Loop.
  3. Place inside the loop the $post_counter variable and let it count by $post_counter++;. So by each time the loop creates a new post the $post_counter, counts up by 1.
  4. Now make an if statement inside the Div which checks if $post_counter is equal to 2, then echo out: class=”last”.

The code:

<?php $post_counter = 0;
if ( have_posts() ) : while ( have_posts() ) : the_post(); 
$post_counter++; ?>
<div <?php if($post_counter == 2) : echo "class=\"last\""; endif; ?>></div>

<?php endwhile; else: ?>
<?php endif; ?>

Suppose you want to count more times, because you want to float, for example, each time 2 Divs next to each other and always want to give the last of the 2 Divs in a row the class=”last” (to style it, for example with a float:right;) then you should reset the $post_counter after the if statement and let it count again.

This is done as follows (watch the $post_counter reset in red):

<?php $post_counter = 0;
if ( have_posts() ) : while ( have_posts() ) : the_post(); 
$post_counter++; ?>
<div <?php if($post_counter == 2) : echo "class=\"last\""; $post_counter = 0; endif; ?>></div>

<?php endwhile; else: ?>
<?php endif; ?>

WordPress custom post type name length longer than 20 characters

WordPress is standard using a max of 20 characters for the custom post type name. You can add the code for a new custom post type in your functions.php but if the name is longer than 20 characters WordPress doesn’t accept it.

I’ve searched for it and found the solution to get a custom post type with a name longer than 20 characters:

  1. Open in /wp-includes the post.php file and search for the following line:
    if ( strlen( $post_type ) > 20 )
    return new WP_Error( ‘post_type_too_long’, __( ‘Post types cannot exceed 20 characters in length’ ) );
  2. Change this line to: (I took 50 characters in my example)
    if ( strlen( $post_type ) > 50 )
    return new WP_Error( ‘post_type_too_long’, __( ‘Post types cannot exceed 50 characters in length’ ) );
  3. Then open your database and edit the wp_posts > post_type column from 20 characters to 50 characters.

Remember that if you update WordPress you need to do these steps every time.

That’s it!

Moving a WordPress website

I have moved several WordPress websites and this is my roadmap for it.

  1. Download Files from “old” WordPress website by FTP. (https://filezilla-project.org/)
  2. Download Database .sql “old” WordPress website.
  3. Make sure you have a new empty server package.
  4. Upload FTP files “old” WordPress website to “new” WordPress website except config.php.
  5. Import Database .sql file from “old” WordPress website to database “new” WordPress website.
  6. Connect config.php file to “new” database.
  7. Run the following SQL query on the database of “new” WordPress website for changing the Site / Home URL:
    UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldsiteurl.com', 'http://www.newsiteurl.com') WHERE option_name = 'home' OR option_name = 'siteurl';

That’s it!

Useful WordPress SQL queries

I am now two years full time busy with WordPress development and I have learned that it is very convenient to use SQL Queries. Below I have compiled a list of useful WordPress SQL Database Queries. I hope it’s useful for you!

Change post_type name for other name

update wp_posts SET post_type = 'newcptname' where post_type like 'oldcptname'

Change WordPress base / home URL

UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldsiteurl.com', 'http://www.newsiteurl.com') WHERE option_name = 'home' OR option_name = 'siteurl';

Change default Admin username

UPDATE wp_users SET user_login = 'Your New Username' WHERE user_login = 'Admin';