How to Set a Default Fallback Image for WordPress Post Thumbnails

Do you want to set a default fallback image for WordPress post thumbnails? Featured images also known as post thumbnails are very useful in engaging users and making your articles more noticeable on social media. In this article, we will show you how to set a default fallback image for WordPress post thumbnails.

Fallback image for post thumbnails in WordPress

Why You Need a Default Fallback WordPress Post Thumbnail?

Post thumbnails or featured images is a WordPress theme feature which allows you to associate an image with your blog post or article. Depending on your theme, this image is then used on homepage, archives, or sidebar widgets.

Some WordPress themes display post thumbnail and excerpt of an article on the homepage in a grid layout. If you forget to add a post thumbnail for an article, then it will appear without a thumbnail, and your layout will look broken.

Layout broken without post thumbnail

By adding a fallback image, you can set a branded image to be used when no post thumbnail is found. This allows you to make sure that all your articles have a post thumbnail.

Another way to deal with this problem is using the Require Featured Image plugin. It makes it mandatory for all authors to add a featured image to their articles before publishing.

Having said that, let’s take a look at how to easily set a default fallback image for WordPress post thumbnails.

Method 1: Set Default Fallback Image for Post Thumbnails Using Plugin

This method is easier and recommended for all users.

First thing you need to do is install and activate the Default Featured Image plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Media page to configure plugin settings.

Default featured image settings

On this page, you need click on the ‘Select default featured image’ button to upload or select the image you would like to use as your fallback post thumbnail.

Don’t forget to click on the save changes button after selecting your featured image.

You can now visit your website to see it in action. The plugin will automatically start showing your default fallback image as post thumbnail for articles that do not have a featured image set.

Method 2: Add Fallback Image as Post Thumbnail Manually

This method requires you to add code to your WordPress theme files. If you haven’t done this before, then please take a look at our guide on how to copy and paste code in WordPress.

First, you need to create an image that you want to use as the default image. Next, you need to upload it to your theme’s images folder using a FTP client.

Your theme’s images folder is located inside /wp-content/themes/yur-theme/ folder. If it doesn’t have the images folder, then you need to create it.

After you have uploaded the image to your website, the next step is to tell WordPress to look for this image when a post doesn’t have its own post thumbnail.

Your WordPress theme displays post thumbnails in various places. You need to look for the_post_thumbnail() function in theme files. Typically, you’ll find it in archive.php, single.php, or content templates.

Next, you need to add the following code where you want to display post thumbnail.

<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>

Don’t forget to replace default-image.jpg with your own image file name.

That’s all, you can now visit your website to see it in action.

Fallback thumbnail

Method 3: Use First Image in an Article as Post Thumbnail

This method also requires you to add code to your WordPress theme files.

First, you need to add this code to your theme’s functions.php file or a site-specific plugin.

//function to call first uploaded image in functions file
function main_image() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment
&post_mime_type=image&order=desc'); if($files) : $keys = array_reverse(array_keys($files)); $j=0; $num = $keys[$j]; $image=wp_get_attachment_image($num, 'large', true); $imagepieces = explode('"', $image); $imagepath = $imagepieces[1]; $main=wp_get_attachment_url($num); $template=get_template_directory(); $the_title=get_the_title(); print "<img src='$main' alt='$the_title' class='frame' />"; endif;
}

This code simply outputs the first image added to an article. Now we need to display this output in your theme.

To do that, you will need to edit the theme files where post_thumbnail(); function is used. Replace it with the following code.

<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { echo get_the_post_thumbnail($post->ID);
} else { echo main_image();
} ?>

Using first image as the post thumbnail in WordPress

You can now visit your website to see it in action.

We hope this article helped you set default fallback image for WordPress post thumbnails. You may also want to see best featured image plugins and tutorials for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Just how to Style Each WordPress Post Differently

perhaps you have locate site that design their blog posts in a different way? Some websites have actually sticky articles highlighted with a custom back ground whereas others may have each category publish styled having unique appearance. Should you ever wished to discover ways to design each WordPress articles in a different way, then you’re into the right place. In this essay, we are going to show you how exactly to style each WordPress post differently.

type Each Post Differently

Note: This tutorial calls for you to add custom CSS in WordPress. You will also must be able to use the Inspect tool. Some basic CSS and HTML knowledge is needed.

Styling Individual Posts in WordPress

WordPress adds default CSS classes to different elements on your own site. A regular compliant WordPress theme must have the rule needed by WordPress to incorporate CSS classes for body, posts, pages, widgets, menus, and much more.

A core WordPress function called post_class() is used by themes to inform WordPress where you should include those default CSS classes for articles.

In the event that you see your internet site and make use of the Inspect device within web browser, then you will be able to see those classes added for every post.

Default CSS classes for WordPress post

Following would be the CSS classes included by default predicated on just what page a person is viewing.

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name
  • .format-{format-name}
  • .type-{post-type-name}
  • .has-post-thumbnail
  • .post-password-required
  • .post-password-protected

A good example output would look like this:

<article id="post-412" course="post-412 post type-post status-publish format-standard hentry category-news">

You’ll style each WordPress post differently utilizing the particular CSS classes.

As an example, if you desired to style a person post, then you can use the post-id class within customized CSS.

.post-412 { background-color: #FF0303;
color:#FFFFFF; } 

Don’t forget to change the post ID to fit your very own.

Styling a particular post in WordPress

Let’s take a good look at another instance.

This time we shall design all articles filed under a particular category called news.

We Could do this by the addition of the next custom CSS to your theme”

.category-news { font-size: 18px; font-style: italic;
} 

This CSS will influence all posts filed under news category.

The Post Class Function

Theme designers make use of the post_class function to share with WordPress where you can add the post classes. Usually it’s within the <article> label.

The post course function not only loads the standard WordPress generated CSS classes, in addition enables you to include your classes.

Dependent on your theme, you’ll find the post_class function inside single.php file or inside content template files. Ordinarily, the code will look something similar to this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

You can include your own personal customized CSS course having an characteristic like this:

<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>

The post_class will print away respective standard CSS classes with your custom CSS course.

If you wish to include multiple CSS classes, then you can determine them being an array after which phone them inside post_class function.

<?php $custom_classes = array( 'longform-article', 'featured-story', 'interactive', );
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>> 

Style Articles In A Different Way According To Writers

The standard CSS classes produced by the_posts function cannot consist of author title as being a CSS course.

If you would like customize the style of each post based on author, then you’ll definitely should first add the writer title as being a CSS class.

This can be done utilizing the following snippet:

<?php $author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $writer ); ?>>

This code will add the user’s nicename being a CSS course. Nicename is a URL friendly name employed by WordPress. It doesn’t have spaces, and all characters are in lowercase that makes it perfect to utilize being a CSS course.

The above mentioned code will give you an output such as this:

<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">

You can now utilize .peter in your customized CSS to create all posts by this particular writer to check different.

.peter { background-color:#EEE;
border:1px solid #CCC; }

Type Articles Considering Popularity using Comment Count

You’ve probably seen sites with popular posts widgets which are often based on remark counts. In this example, we shall show you how exactly to style posts in a different way utilising the remark count.

First, we must obtain the remark count and associate a class with it.

For the comment count, you’ll need certainly to add these code within theme files. This rule goes inside the WordPress loop, in order to include it simply ahead of the <article> tag aswell.

<?php $postid = get_the_ID(); $total_comment_count = wp_count_comments($postid); $my_comment_count = $total_comment_count->approved; if ($my_comment_count <10) { $my_comment_count = 'new'; } elseif ($my_comment_count >= 10 && $my_comment_count <20) { $my_comment_count = 'emerging'; } elseif ($my_comment_count >= 20) { $my_comment_count = 'popular'; }
?>

This rule checks comment count the post being displayed and assigns them a value on the basis of the count. Including, posts with under 10 reviews get a class called brand new, significantly less than 20 are named growing, and such a thing over 20 opinions is popular.

Next, you’ll want to add the remark count CSS class to the post_class function.

<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

This may add brand new, rising, and popular CSS classes to all or any posts on the basis of the number of commentary each post has.

You could add customized CSS to create articles considering appeal:

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

We are just adding boundaries, you can include any CSS rules you would like.

Type Posts Predicated On Custom Fields

Hardcoding CSS classes inside theme file limits one to only those particular CSS classes. Let’s say you desired to determine which CSS class to increase articles when you are composing it?

With custom industries, you can add CSS classes regarding fly.

First you’ll want to put in a custom field up to a post, so that you can test that down. Edit a post and scroll right down to custom areas part.

Add post class being a customized field

Add post-class since the custom field name, and whatever you wish to utilize as CSS course in the value field.

Don’t forget to click the ‘Add custom industry’ switch to store it after which save your valuable post.

Next, edit your theme files to show your custom industry as the post course.

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>

It’s going to output the following HTML:

<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">

You can now add customized CSS for the post_class you included using custom industry.

.trending{
background-color:ff0000;
}

Custom industries might have multiple values, in order to include multiple CSS classes utilizing the exact same name.

There are many more methods to design WordPress posts independently. As your abilities develop, you’ll keep discovering brand new approaches to style posts utilizing different conditions.

Develop this article aided you learn how to style each WordPress post differently. It’s also possible to desire to see our ultimate variety of probably the most desired WordPress guidelines, tricks, and cheats.

In the event that you liked this short article, then please donate to our YouTube Channel for WordPress video tutorials. You can also find united states on Twitter and Facebook.

How to Display Custom Fields Outside The Loop in WordPress

Do you want to display custom fields outside the loop in WordPress? Normally, custom fields are displayed inside the WordPress loop along with other post content and metadata. In this article, we will show you how to display custom fields outside the loop in WordPress.

How to display custom fields outside the WordPress loop

What Are Custom Fields in WordPress

Custom fields allow you to add additional meta data into your WordPress posts and then display them along with your post content.

You can add custom fields by simply enabling the custom fields metabox under the Screen Options. You can also create custom metaboxes in WordPress to give your custom fields a better user interface.

Adding custom field to a WordPress post or page

For more details, see our beginner’s guide on using WordPress custom fields.

Since custom fields add metadata to posts, they can be easily displayed inside the WordPress loop along with other post content. However, sometimes you may want to display them outside the loop. For example, in a sidebar widget. This is when it becomes a bit tricky.

That being said, let’s see how to easily display custom fields outside the loop in WordPress.

Display Custom Fields Data Outside The Loop in WordPress

Instead of displaying custom fields meta data outside the loop, we’ll actually show you how to use multiple loops in your WordPress themes without affecting the main loop.

This article requires you to add code to your WordPress theme files. If you haven’t done this before, then you may want to see our guide on how to copy and paste code in WordPress.

You’ll need to add the following code to your theme files where you want to display the custom fields data in WordPress.

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'Your-Custom-Field', true);
wp_reset_query();
?>

This code simply loads up the global variable $wp_query to get the post ID. After that, it uses get_post_meta() function to fetch and output your custom field data.

Don’t forget to change Your-Custom-Field with your actual custom field.

You can customize the code to match your needs. You can also use other query arguments to fetch and display custom fields data for different posts and pages.

Let’s take a look at another example. This one uses WP_Query class which is a much better and more flexible way to use multiple loops in your WordPress theme files.

Simply add this code to your theme or child theme where you would like to show the custom field.

$args = array ( // Post or Page ID 'p' => 231,
); // The Query
$the_query = new WP_Query( $args ); // The Loop
if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); echo get_post_meta( get_the_ID(), 'Mood', true); } /* Restore original Post Data */ wp_reset_postdata(); } else { echo 'Nothing found'; }

Don’t forget to replace Mood with your own custom field name and post ID with your own post or page id.

Custom field in WordPress sidebar widget

That’s all for now.

We hope this article helped you learn how to display custom fields outside the loop in WordPress. You may also want to see our WordPress theme cheat sheet for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

How to Style Individual Categories Differently in WordPress

Do you want to style categories differently in WordPress? Most WordPress themes use the same style for all category archive pages. However, if you run a content rich website, then you can style each category differently to maximize their potential. In this article, we will show you how to easily style categories differently in WordPress.

How to style categories differently in WordPress

Why Style Categories Differently in WordPress?

As we said earlier, most WordPress themes use the same template for each category archive page. That’s because theme developers don’t know how you will be using the categories on your website and what those categories will be.

However, if you are running a content rich site, then changing the layout of a category archive page can have a dramatic impact on how users engage with the content on that page.

For example, if you run a news or magazine site, then you can have local ads displayed on the local news category. You can show weather information, show most popular stories in that category, and so on.

Having said that, let’s see how to easily style individual categories differently in WordPress.

Styling Individual Categories Differently in WordPress

There are multiple ways to style categories in WordPress. We will show you two different methods to style categories, and you can choose the one that best suits your needs and skill level.

Using Single Category Template in WordPress Theme

WordPress themes follow a standard template hierarchy. Depending on a template file name, WordPress can automatically pick the right template to display a page.

For example, it looks for category.php file to display category archive pages.

WordPress also allows you to create templates for individual categories as well. Let’s suppose you want to style the ‘Apple’ category differently. You can do that by adding a new template file to your theme and naming it category-apple.php.

Connect to your WordPress site using an FTP client and then go to /wp-content/themes/your-current-theme/ folder and create a new file category-apple.php. Don’t forget to replace apple with your own category name.

Creating a template for individual category in your WordPress theme

You can use your theme’s category.php file as a starting point. Simply edit and copy all of its content. Now edit your newly created category-apple.php file and paste the code inside it.

After that you can start making changes to your individual category template. You can create and use a different sidebar for this category, make it a full-width page, add a welcome message, or anything else you want.

Style Individual Categories in WordPress Using CSS

WordPress automatically adds CSS classes to different elements throughout your website. These include both the body class and the post class.

For example, if you view a category archive page and then use the Inspect Tool, you will notice category and category-name CSS classes in the body tag.

Category class added to body element by WordPress

You can use this CSS class to style each individual category differently by adding custom CSS.

Here is some example CSS that you can use as a starting point.

body.category-apple { background-color:#EEE;
background:url("http://example.com/wp-content/uploads/2017/background.jpg") no-repeat fixed;
color:#FFFFFF;
}
.category-apple .site { background:#232323; }
.category-apple a { color:#CCCCCC; } 

Don’t forget to change the category name in the CSS class with your own category name.

Changing category style using CSS

We hope this article helped you learn how to style categories differently in WordPress. You may also want to see our list of most wanted category hacks and plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.