How to Remove Author Name from WordPress Posts

Do you want to remove the author name from your WordPress posts? By default, WordPress does not have an option to publish articles without an author name. In this article, we will show you few different ways to remove author name from your WordPress posts.… Read More »

The post How to Remove Author Name from WordPress Posts appeared first on WPBeginner.

Do you want to remove the author name from your WordPress posts? By default, WordPress does not have an option to publish articles without an author name. In this article, we will show you few different ways to remove author name from your WordPress posts.

Remove author name from WordPress posts

Method 1: Remove Author Name from WordPress Posts Using a Plugin

This method is easier and recommended for all users. However, it may not work with all WordPress themes.

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

Upon activation, you need to visit Plugins » Show/Hide Author page to configure plugin settings.

Show/Hide Author settings

The plugin automatically hides author name for all post types. If you want to display the author name for a specific post type, then you need to select it on this screen.

Below the post types, you can also add custom URLs where you want to hide the author name.

This plugin can hide author name in most cases. However, your WordPress theme may still show accompanying text before the author name. For example, ‘by John Smith’ would now just show ‘by’.

To hide this byline, you need to visit your website and take the mouse over to the text you want to hide. Next, you need to right click and select Inspect tool from your browser menu.

Now you need to locate the div class containing your author byline.

Byline text class

Next, you need to copy the CSS class used here and then paste it in the plugin settings under Advanced options.

Add byline class to hide it

Don’t forget to click on the save changes button to store your settings.

Method 2: Manually Remove Author Name from WordPress Posts

This method requires you to edit 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.

Note: Make sure that you create backup of your theme or child theme before making any changes. If something goes wrong, then this will help you easily revert changes.

WordPress themes use different variations of code to display author name. You will need to locate the code responsible for displaying the author’s name in your theme files and delete it.

Most common locations to find this code are single.php, content.php, archive.php, and index.php files.

In many cases, you will not be able to find the code that outputs author name. Instead, you will find a template tag defined in the functions.php file or template-tags.php file.

For example, the default Twenty Seventeen theme uses the function twentyseventeen_posted_on to display author name and post date / time. This function is defined in template-tags.php file.

function twentyseventeen_posted_on() {
	// Get the author name; wrap it in a link.
	$byline = sprintf(
		_x( 'by %s', 'post author', 'twentyseventeen' ),
		'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . get_the_author() . '</a></span>'
	);
	// Finally, let's write all of this to the page.
	echo '<span class="posted-on">' . twentyseventeen_time_link() . '</span><span class="byline"> ' . $byline . '</span>'; // WPCS: XSS OK.
}

Now you just need to remove the code that outputs the author name. Take a look at following example:

function twentyseventeen_posted_on() {
	// Finally, let's write all of this to the page.
	echo '<span class="posted-on">' . twentyseventeen_time_link() . '</span><span class="byline"> ' . $byline . '</span>'; // WPCS: XSS OK.
}

Don’t forget to save your changes and upload the files back to your website.

You can now visit your website to see your changes in action:

Author name removed by manually editing theme files

Method 3: Create a Generic Author Name for Publishing WordPress Posts

This method does not remove the author name, but it can be used as a workaround.

Basically you will create a generic author name and use it for all your past and future articles. You will need to change the author name before publishing each post.

This method is irreversible. If you do this and want to revert back, then you will have to edit each post and assign it to the original author manually.

That being said, let’s get started.

First add a new author to your WordPress site and give it a generic username such as editorialteam.

Add new user

Next, you need to visit Users » All Users page and click on the ‘Edit’ link below the username you just added.

Edit user

On the user profile screen, scroll down to the ‘Nickname’ option and enter the name you want to be displayed (for example: Editorial Team).

After that click on the drop down menu next to ‘Display name publicly as’ option and select the nickname you just entered.

Select display name

You can also add a generic bio and even create a gravatar for that user account.

Now go to Posts » All Posts page and click on the screen options menu at the top. Enter 999 for number of items to display.

Show all posts on screen

This will allow you to quickly edit and change author name for a large number of posts.

You need to select all posts using the checkbox and then select edit under the bulk actions drop down menu. After that click on the ‘Apply’ button to continue.

Select all posts for bulk editing

WordPress will now show you the bulk editing options. You need to change the author to the generic author name you added earlier and then click on update button.

Bulk change author name

WordPress will now update all selected posts and change author name. Remember, this process may take some time depending on how fast your WordPress hosting is.

If you have more than 999 posts, then you will need to go to page 2 and repeat the process.

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

Team author name

We hope this article helped you learn how to remove author name from WordPress posts. You may also want to see our list of 25 effective ways to monetize your website.

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.

The post How to Remove Author Name from WordPress Posts appeared first on WPBeginner.

How to Find Which WordPress Theme a Site is Using

Have you ever wanted to find out which WordPress theme a website is using? Often we get emails from readers asking us for help in finding the exact theme that a certain website is using. In this article, we will show you how to easily… Read More »

The post How to Find Which WordPress Theme a Site is Using appeared first on WPBeginner.

Have you ever wanted to find out which WordPress theme a website is using? Often we get emails from readers asking us for help in finding the exact theme that a certain website is using. In this article, we will show you how to easily find out which WordPress theme a specific website is using.

Which Theme is a Website is Using?

When you are starting a new website, choosing the right theme is a very important decision.

Often you have ideas and inspirations that you have seen on other websites. In some cases, you may want your website to have almost the same layout and features as another website that you saw on the internet.

This could be possible specially if that website is using one of the thousands of free and paid WordPress themes available in the market.

And thankfully, it’s quite easy to find out which WordPress theme a website is using.

Method 1. Find WordPress Theme used by a Website with IsItWP

One of the easiest way to detect WordPress theme used by a website is with IsItWP. It is an online tool that allows you to look up plugins and themes used by a WordPress website.

First, you need to visit IsItWP website and enter the URL of a website you want to check.

Looking up a website on IsItWP

IsItWP will first check if the website is using WordPress. If it is a WordPress powered website, then IsItWP will check which WordPress theme the website is using. It will also try to detect WordPress plugins used by the website.

After that, it will show you the results with more details about the plugins and theme used by the website.

WordPress theme and plugin details

IsItWP may not be able to offer you details about a custom WordPress theme or a child theme.

However it will display the name of the theme, so you can google it to see if it’s available for download.

Method 2. Manually Detect WordPress Theme Used by a Website

Sometimes website owners change the WordPress theme name. This stop tools like IsItWP to detect which WordPress theme they are using.

However, there still might be plenty of clues hidden in the code that you can detect and find the WordPress theme they are using.

Let’s get started.

Each WordPress theme is required to have a style.css file. This file contains theme header which tells WordPress the name of the theme, theme author, URI, version, etc. It also contains CSS styles used by the theme.

To locate this file, first you need to visit the website. Right click anywhere on the screen and select ‘View Page Source’ from the menu.

View page source of a WordPress website

This will open the source code of the page you are viewing in a new browser tab. Now you need to find a line in the source code that looks something like this:

<link rel='stylesheet' id='themename_style-css'  href='http://example.com/wp-content/themes/theme-name/style.css?ver=1.1.47' type='text/css' media='all' />

You can click on the URL in this line to open the style.css file.

On top of the style.css file, you will see the theme header block which contains information about the theme used by the website. Typically, it would look something like this:

Theme Name:     Theme Name 
Theme URI:      https://example.com
Author:         ThemeAuthorName
Author URI:     https://example.com
Description:    My Theme is a flexible WordPress theme designed for portfolio websites
Version:        1.1.47
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    hestia
Tags: blog, custom-logo, portfolio, e-commerce, rtl-language-support, post-formats, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready

You may be able to find the Theme’s URL or Theme Author’s URL here which will lead you to the theme used by the website.

Finding The Parent Theme

Many WordPress websites use child themes to customize their websites. In that case, their theme header will contain information about the parent theme they are using.

*
Theme Name:   My Child Theme
Description:  Just a child theme
Author:       Peter Smith
Author URL:   Write here the author's blog or website url
Template:     hestia
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  my-child-theme
*/

In the above example, this header block has an extra ‘Template’ parameter in the theme header block. This template is the parent theme used by this website.

You can also find out the parent theme by looking at the website’s source code. There you will find another style.css file loaded from another theme. This other style.css file is the parent theme’s stylesheet and clicking on it will tell you which parent theme a site is using.

That’s all for now, we hope this article helped you learn how to find which WordPress theme a site is using. You may also want to see our ultimate list of the most wanted WordPress tips, tricks, and hacks.

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.

The post How to Find Which WordPress Theme a Site is Using appeared first on WPBeginner.

How to Set a Default Fallback Image for WordPress Post Thumbnails

Often new bloggers forget to set a post thumbnail (featured image) which causes the template display to break. In this article, we will show you two different ways of adding a default fallback image for WordPress Post Thumbnails.

The post How to Set a Default Fallback Image for WordPress Post Thumbnails appeared first on WPBeginner.

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.

The post How to Set a Default Fallback Image for WordPress Post Thumbnails appeared first on WPBeginner.

How to Add a Parallax Effect to Any WordPress Theme

Recently, one of our readers asked us how to add a parallax effect to any WordPress theme? Parallax effect is a web design trend where a background image scrolls slower than foreground content. In this article, we will show you how to easily add a… Read More »

The post How to Add a Parallax Effect to Any WordPress Theme appeared first on WPBeginner.

Recently, one of our readers asked us how to add a parallax effect to any WordPress theme? Parallax effect is a web design trend where a background image scrolls slower than foreground content. In this article, we will show you how to easily add a parallax effect to any WordPress theme.

Adding parallax effect to any WordPress theme

What is a Parallax Effect?

Parallax effect is a modern web design technique where background element scrolls slower than foreground content. This effect adds depth to the background images and makes them feel interactive.

Parallax effect can be used on landing pages, longform content, sales pages, or homepage of a business website. It is a great way to highlight different sections on a lengthy page.

Many premium WordPress themes come with built-in parallax effect on their homepage. You can also use parallax effect in most WordPress page builder plugins as well.

However, not all themes have a built-in parallax effect, and you may not want to use a page builder to create custom page layouts just for a parallax effect.

Let’s take a look at how to easily add parallax background effect to any WordPress theme.

Method 1: Add Parallax Effect to Any WordPress Theme Using Plugin

This method doesn’t require you to add any code to your WordPress theme. It is easier and recommended for most users.

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

Upon activation, you need to edit the page or post where you want to add the parallax effect. You will notice the new ‘Advanced WordPress Backgrounds’ button in the visual editor.

WordPress advanced background button

Clicking on it will bring up a popup where you can change different settings for the background you want to add.

First, you need to select an image as your background type and then check the ‘stretch’ option.

Parallax background settings

Next, you need to click on the ‘Select Image’ button to upload or select an image you want to use. Make sure that you are using a large image otherwise it will appear pixelated.

After that you need to enable Parallax by choosing a parallax type. There are a number of styles available that you can experiment with. The most commonly used parallax effect is scroll.

Click on the Insert button to continue.

The plugin will now add a shortcode inside your WordPress post editor. It will look something like this:

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]

Your Content Here

[/nk_awb]

Replace ‘Your content here’ with your own content and then save your page.

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

Parallax effect preview

Method 2: Add Parallax Effect to Any WordPress Theme with CSS

This method requires you to have a fair understanding of HTML / CSS as well as how WordPress themes work.

First, you will need to upload the image you want to use for parallax effect to your WordPress media library by visiting Media » Add New page.

After uploading the image, you need to copy the image URL by editing the image in WordPress media library.

Copy image URL

Next, you need to add the following HTML into the page or post where you want to show the parallax effect. You can also add this HTML into your WordPress theme or child theme.

<div class="parallax">
<div class="parallax-content">

Your content goes here...

</div>
</div>

Next you need to add the following custom CSS to your WordPress theme.

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}

.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

Don’t forget to replace the background image URL with your own background image.

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

Parallax effect added with CSS

Note: You may need to adjust CSS to work with your site’s layout.

We hope this article helped you learn how to easily add parallax effect to any WordPress theme. You may also want to see our mega list of the most wanted WordPress tips, tricks, and hacks.

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.

The post How to Add a Parallax Effect to Any WordPress Theme appeared first on WPBeginner.

How to Style Each WordPress Post Differently

Have you ever come across a site that style their blog posts differently? Some sites have sticky posts highlighted with a custom background whereas others may have each category post styled with a unique look. If you ever wanted to learn how to style each… Read More »

The post How to Style Each WordPress Post Differently appeared first on WPBeginner.

Have you ever come across a site that style their blog posts differently? Some sites have sticky posts highlighted with a custom background whereas others may have each category post styled with a unique look. If you ever wanted to learn how to style each WordPress posts differently, then you’re in the right place. In this article, we will show you how to style each WordPress post differently.

Style Each Post Differently

Note: This tutorial requires you to add custom CSS in WordPress. You will also need to be able to use the Inspect tool. Some basic CSS and HTML knowledge is required.

Styling Individual Posts in WordPress

WordPress adds default CSS classes to various elements on your website. A standard compliant WordPress theme must have the code required by WordPress to add CSS classes for body, posts, pages, widgets, menus, and more.

A core WordPress function called post_class() is used by themes to tell WordPress where to add those default CSS classes for posts.

If you visit your website and use the Inspect tool in your browser, then you will be able to see those classes added for each post.

Default CSS classes for WordPress post

Following are the CSS classes added by default based on what page a user 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

An example output would look like this:

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

You can style each WordPress post differently using the respective CSS classes.

For example, if you wanted to style an individual post, then you can use the post-id class in your custom CSS.

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

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

Styling a specific post in WordPress

Let’s take a look at another example.

This time we will style all posts filed under a specific category called news.

We can do this by adding the following custom CSS to our theme”

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

This CSS will affect all posts filed under news category.

The Post Class Function

Theme developers use the post_class function to tell WordPress where to add the post classes. Usually it is in the <article> tag.

The post class function not only loads the default WordPress generated CSS classes, it also allows you to add your own classes.

Depending on your theme, you’ll find the post_class function in your single.php file or in the content template files. Normally, the code will look something like this:

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

You can add your own custom CSS class with an attribute like this:

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

The post_class will print out respective default CSS classes along with your custom CSS class.

If you want to add multiple CSS classes, then you can define them as an array and then call them in the post_class function.

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

Style Posts Differently Based on Authors

The default CSS classes generated by the_posts function does not include author name as a CSS class.

If you want to customize the style of each post based on author, then you will need to first add the author name as a CSS class.

You can do this by using the following snippet:

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

This code will add the user’s nicename as a CSS class. Nicename is a URL friendly name used by WordPress. It does not have spaces, and all characters are in lowercase which makes it perfect to use as a CSS class.

The above code will give you an output like this:

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

Now you can use .peter in your custom CSS to style all posts by this particular author to look different.

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

Style Posts Based on Popularity using Comment Count

You may have seen sites with popular posts widgets which are sometimes based on comment counts. In this example, we will show you how to style posts differently using the comment count.

First, we need to get the comment count and associate a class with it.

To get the comment count, you’ll need to add the following code in your theme files. This code goes inside the WordPress loop, so you can add it just before the <article> tag as well.

<?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 = 'ermerging';
	} elseif ($my_comment_count >= 20) {
		$my_comment_count = 'popular';
	}
?>

This code checks comment count for the post being displayed and assigns them a value based on the count. For example, posts with less than 10 comments get a class called new, less than 20 are referred to as emerging, and anything over 20 comments is popular.

Next, you need to add the comment count CSS class to the post_class function.

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

This will add new, emerging, and popular CSS classes to all posts based on the number of comments each post has.

You can add custom CSS to style posts based on popularity:

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

We are just adding borders, you can add any CSS rules you want.

Style Posts Based on Custom Fields

Hardcoding CSS classes in your theme file limits you to only those specific CSS classes. What if you wanted to decide which CSS class to add to an article as you are writing it?

With custom fields, you can add CSS classes on the fly.

First you need to add a custom field to a post, so that you can test it out. Edit a post and scroll down to custom fields section.

Add post class as a custom field

Add post-class as the custom field name, and anything you want to use as CSS class in the value field.

Don’t forget to click on the ‘Add custom field’ button to store it and then save your post.

Next, edit your theme files to display your custom field as the post class.

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

It will 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 custom CSS for the post_class you added using custom field.

.trending{
background-color:##ff0000;
}

Custom fields can have multiple values, so you can add multiple CSS classes using the same name.

There are many more ways to style WordPress posts individually. As your skills grow, you’ll keep discovering new ways to style posts using different conditions.

We hope this article helped you learn how to style each WordPress post differently. You may also want to see our ultimate list of the most wanted WordPress tips, tricks, and hacks.

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.

The post How to Style Each WordPress Post Differently appeared first on WPBeginner.

How to Display Custom Fields Outside The Loop in WordPress

In this article we will show you how you can display custom fields outside the loop. This tutorial will allow you to expand the possibilities of what you can do with WordPress.

The post How to Display Custom Fields Outside The Loop in WordPress appeared first on WPBeginner.

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.

The post How to Display Custom Fields Outside The Loop in WordPress appeared first on WPBeginner.

6 Top WordPress Theme Marketplaces to Find the Best Themes

We are often asked by our users where can they find the best WordPress themes? In particular, which WordPress theme marketplaces or theme shops is the best? There are actually so many great themes out there that most beginners feel a bit overwhelmed by the… Read More »

The post 6 Top WordPress Theme Marketplaces to Find the Best Themes appeared first on WPBeginner.

We are often asked by our users where can they find the best WordPress themes? In particular, which WordPress theme marketplaces or theme shops is the best? There are actually so many great themes out there that most beginners feel a bit overwhelmed by the choices. In this article, we will show you the best places to find WordPress themes and list the top WordPress theme marketplaces that you should consider.

Where to find WordPress themes? Top WordPress theme Marketplaces

Before Finding A Theme for Your WordPress Site

Before you go on looking for WordPress themes, first you should ask yourself these basic questions.

1. What is your website about?
2. What will be the primary goal of your website?
3. How do you plan to achieve those goals?

For example, if you want to start an online store, then you may want to look for themes compatible with your eCommerce plugin.

If your goal is to sell a single product, then you may want to look for sales page themes.

Also think about your content marketing plan, lead generation strategy, and all the essential WordPress plugins you will be using on your website.

You want to write down these notes because it will help you remain focused.

For more detailed tips, see our article on selecting the perfect WordPress theme and things you need to consider.

Now that being said, let’s take a look at where to find WordPress themes and which top theme marketplaces to browse.

1. WordPress.org Theme Directory

WordPress.org Themes

If you are looking for a free WordPress theme, then WordPress.org is the best place to start your search. With 4800+ free themes, it is the largest collection of free WordPress themes.

The advantage of choosing a theme from WordPress.org is that they are included after a rigorous review process. This means that these themes strictly adhere to WordPress theme directory guidelines and follow the official best practices.

Many of these free themes will lack the features that you’d see in premium themes. However, if you are just starting out and don’t need too many features, then you can find some really cool themes there. For more on this topic see our article on free vs premium WordPress themes.

Need some inspiration? Check out our pick of the best free WordPress blog themes or take a look at these beautiful free WordPress business themes.

2. MOJO Marketplace

MOJO Marketplace

MOJO Marketplace is a large marketplace for WordPress themes, plugins, and services. At the time of writing this article, they have more than 7900 items on sale, including 900+ premium themes. You’ll also find their WordPress services offered by top WordPress hosting companies like Bluehost.

Each theme at MOJO Marketplace goes through a manual submission process. Their review team examines each theme carefully to ensure high quality coding standards.

The marketplace is neatly organized into topics and categories with a filterable search feature. This allows you to quickly locate themes designed for specific industry or category.

Support for all third-party themes is provided by their sellers. Each item has its own support forum where you can browse past threads or ask for support.

3. Themeforest

Themeforest

Themeforest is part of Envato family, a large network of design, graphics, audio, and video marketplace. Themeforest offers a large collection of premium WordPress themes neatly organized in categories and easily searchable.

Some of the themes available on Themeforest are among the top selling WordPress themes of all times. Each theme developer is responsible for offering full support and documentation for their products. Most items are offered on a 6-month license period including support and updates.

You can easily read user reviews, theme rating, and see developer portfolio before making the purchase.

All items at Themeforest are thoroughly reviewed and tested for quality of code and best practices. Due to high competition in the premium theme market, you’ll see themes with tons of features and freebies included to entice customers.

4. Elegant Themes

Elegant Themes

Elegant Themes is one of the oldest and most well-known WordPress theme shops. Elegant Themes offers premium WordPress themes, plugins, and one of the best drag and drop page builder in the market, The Divi Builder.

Unlike theme marketplaces mentioned in the list, Elegant Themes develops and sells their own themes. This ensures that you get quality code, optimized for speed and performance, and compatibility with a wide range of WordPress plugins and tools.

Perhaps the best part about Elegant Themes is their pricing model. For only $89, you’ll get access to all their products for one year with support and updates. For just $249, you can purchase the lifetime license. Both licenses allow you to use all their products on unlimited number of websites.

5. CSSIgniter

CSSIgniter

CSSIgniter offers a large collection of premium WordPress themes for almost any kind of website. With more than 80 premium themes, CSSIgniter is catering the needs of WordPress developers and website owners since 2010.

They have some of the best WordPress themes for restaurants, hotel themes, magazine, and business themes in the market. All their themes are beginner friendly, come with flexible features, and easier customization options.

Themes are neatly organized by categories with detailed screenshots, descriptions, and live demos. Since they sell their own themes, you will find detailed documentation for each theme under the support tab.

You can get all their themes for $69/year, or $199 for lifetime access with support and updates.

6. StudioPress

StudioPress

StudioPress is one of the most recognizable names in WordPress themes industry. They are the creators of Genesis theme framework which provides a rock-solid foundation for developing high quality WordPress themes.

StudioPress offers their own WordPress themes and themes developed by third-party developers. All themes available in their marketplace are Genesis child themes.

Unlike many other premium theme sellers, StudioPress themes offer simpler features that you’ll actually need and use on your websites. Setting up a StudioPress theme is often way easier than many other premium themes.

Their pricing plans include one time fee for unlimited updates and support. You can purchase a single theme or their membership plan for $499.95, which gives you access to all their themes plus all third party themes as well.

More WordPress Theme Selections

These WordPress theme marketplaces try their very best to showcase the best WordPress templates suitable for different kind of businesses, blogs, and other websites.

However, sometimes you would still wish that someone would do all the browsing for you and show you only the best options.

This is what we’ve been doing in our WordPress Showcases. Our experts hand-pick the best WordPress themes for different kind of industries and websites. Check out few of our selections below:

We hope this article helped you learn where to find WordPress themes and which WordPress theme marketplaces to browse. You may also want to see our ultimate step by step WordPress SEO guide 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.

The post 6 Top WordPress Theme Marketplaces to Find the Best Themes appeared first on WPBeginner.

6 Top WordPress Theme Marketplaces to Find the Best Themes

We are often asked by our users where can they find the best WordPress themes? In particular, which WordPress theme marketplaces or theme shops is the best? There are actually so many great themes out there that most beginners feel a bit overwhelmed by the… Read More »

The post 6 Top WordPress Theme Marketplaces to Find the Best Themes appeared first on WPBeginner.

We are often asked by our users where can they find the best WordPress themes? In particular, which WordPress theme marketplaces or theme shops is the best? There are actually so many great themes out there that most beginners feel a bit overwhelmed by the choices. In this article, we will show you the best places to find WordPress themes and list the top WordPress theme marketplaces that you should consider.

Where to find WordPress themes? Top WordPress theme Marketplaces

Before Finding A Theme for Your WordPress Site

Before you go on looking for WordPress themes, first you should ask yourself these basic questions.

1. What is your website about?
2. What will be the primary goal of your website?
3. How do you plan to achieve those goals?

For example, if you want to start an online store, then you may want to look for themes compatible with your eCommerce plugin.

If your goal is to sell a single product, then you may want to look for sales page themes.

Also think about your content marketing plan, lead generation strategy, and all the essential WordPress plugins you will be using on your website.

You want to write down these notes because it will help you remain focused.

For more detailed tips, see our article on selecting the perfect WordPress theme and things you need to consider.

Now that being said, let’s take a look at where to find WordPress themes and which top theme marketplaces to browse.

1. WordPress.org Theme Directory

WordPress.org Themes

If you are looking for a free WordPress theme, then WordPress.org is the best place to start your search. With 4800+ free themes, it is the largest collection of free WordPress themes.

The advantage of choosing a theme from WordPress.org is that they are included after a rigorous review process. This means that these themes strictly adhere to WordPress theme directory guidelines and follow the official best practices.

Many of these free themes will lack the features that you’d see in premium themes. However, if you are just starting out and don’t need too many features, then you can find some really cool themes there. For more on this topic see our article on free vs premium WordPress themes.

Need some inspiration? Check out our pick of the best free WordPress blog themes or take a look at these beautiful free WordPress business themes.

2. MOJO Marketplace

MOJO Marketplace

MOJO Marketplace is a large marketplace for WordPress themes, plugins, and services. At the time of writing this article, they have more than 7900 items on sale, including 900+ premium themes. You’ll also find their WordPress services offered by top WordPress hosting companies like Bluehost.

Each theme at MOJO Marketplace goes through a manual submission process. Their review team examines each theme carefully to ensure high quality coding standards.

The marketplace is neatly organized into topics and categories with a filterable search feature. This allows you to quickly locate themes designed for specific industry or category.

Support for all third-party themes is provided by their sellers. Each item has its own support forum where you can browse past threads or ask for support.

3. Themeforest

Themeforest

Themeforest is part of Envato family, a large network of design, graphics, audio, and video marketplace. Themeforest offers a large collection of premium WordPress themes neatly organized in categories and easily searchable.

Some of the themes available on Themeforest are among the top selling WordPress themes of all times. Each theme developer is responsible for offering full support and documentation for their products. Most items are offered on a 6-month license period including support and updates.

You can easily read user reviews, theme rating, and see developer portfolio before making the purchase.

All items at Themeforest are thoroughly reviewed and tested for quality of code and best practices. Due to high competition in the premium theme market, you’ll see themes with tons of features and freebies included to entice customers.

4. Elegant Themes

Elegant Themes

Elegant Themes is one of the oldest and most well-known WordPress theme shops. Elegant Themes offers premium WordPress themes, plugins, and one of the best drag and drop page builder in the market, The Divi Builder.

Unlike theme marketplaces mentioned in the list, Elegant Themes develops and sells their own themes. This ensures that you get quality code, optimized for speed and performance, and compatibility with a wide range of WordPress plugins and tools.

Perhaps the best part about Elegant Themes is their pricing model. For only $89, you’ll get access to all their products for one year with support and updates. For just $249, you can purchase the lifetime license. Both licenses allow you to use all their products on unlimited number of websites.

5. CSSIgniter

CSSIgniter

CSSIgniter offers a large collection of premium WordPress themes for almost any kind of website. With more than 80 premium themes, CSSIgniter is catering the needs of WordPress developers and website owners since 2010.

They have some of the best WordPress themes for restaurants, hotel themes, magazine, and business themes in the market. All their themes are beginner friendly, come with flexible features, and easier customization options.

Themes are neatly organized by categories with detailed screenshots, descriptions, and live demos. Since they sell their own themes, you will find detailed documentation for each theme under the support tab.

You can get all their themes for $69/year, or $199 for lifetime access with support and updates.

6. StudioPress

StudioPress

StudioPress is one of the most recognizable names in WordPress themes industry. They are the creators of Genesis theme framework which provides a rock-solid foundation for developing high quality WordPress themes.

StudioPress offers their own WordPress themes and themes developed by third-party developers. All themes available in their marketplace are Genesis child themes.

Unlike many other premium theme sellers, StudioPress themes offer simpler features that you’ll actually need and use on your websites. Setting up a StudioPress theme is often way easier than many other premium themes.

Their pricing plans include one time fee for unlimited updates and support. You can purchase a single theme or their membership plan for $499.95, which gives you access to all their themes plus all third party themes as well.

More WordPress Theme Selections

These WordPress theme marketplaces try their very best to showcase the best WordPress templates suitable for different kind of businesses, blogs, and other websites.

However, sometimes you would still wish that someone would do all the browsing for you and show you only the best options.

This is what we’ve been doing in our WordPress Showcases. Our experts hand-pick the best WordPress themes for different kind of industries and websites. Check out few of our selections below:

We hope this article helped you learn where to find WordPress themes and which WordPress theme marketplaces to browse. You may also want to see our ultimate step by step WordPress SEO guide 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.

The post 6 Top WordPress Theme Marketplaces to Find the Best Themes appeared first on WPBeginner.

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… Read More »

The post How to Style Individual Categories Differently in WordPress appeared first on WPBeginner.

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.

The post How to Style Individual Categories Differently in WordPress appeared first on WPBeginner.