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.

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.

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.

How to Display Different Sidebar for Each Post and Page in WordPress

Do you want to display different sidebars for different posts and pages on your WordPress site? Typically, WordPress themes show the same sidebars on fixed locations regardless of which post or page you’re on. In this article, we will show you how to create and… Read More »

The post How to Display Different Sidebar for Each Post and Page in WordPress appeared first on WPBeginner.

Do you want to display different sidebars for different posts and pages on your WordPress site? Typically, WordPress themes show the same sidebars on fixed locations regardless of which post or page you’re on. In this article, we will show you how to create and display different sidebars for each post and pages in WordPress.

Custom Sidebars for WordPress

When Would You Need Different Sidebars in WordPress?

By default, sidebars are defined by your WordPress theme. Each WordPress theme comes with a few sidebars or widget ready areas that allow you to add widgets.

Typically a sidebar on the blog is displayed throughout your site on all posts, pages, categories, and archive pages. However, sometimes you may want your sidebar content to change based on specific posts or pages.

For example, you can show different featured content in the sidebar of your most popular posts, add different email signup forms, or display ads.

Having said that, let’s see how to create and display different sidebar for each post and page in WordPress.

Displaying Different Sidebars for Each Post and Page in WordPress

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

Upon activation, you need to visit the Appearance » Theme Sidebars page to create custom sidebars.

Creating a new custom sidebar

First you need to provide a name for your custom sidebar and then click on the create sidebar button.

The plugin will now create your sidebar, and you will be able to select the sidebar properties.

Sidebar settings

After that you need to select which theme sidebar will be replaced by your custom sidebar and provide a description for it.

Next, you need to select where you want your custom sidebar to replace the theme sidebar. You will see your posts, pages, categories and tags listed in the left column of the screen.

Simply select the areas where you want custom sidebar to be displayed and then click on ‘Add to sidebar’ button.

Add posts or pages to your custom sidebar

You will notice your selected items appear under the custom sidebar settings. Don’t forget to click on the save button to store your sidebar settings.

Easy Custom Sidebar allows you to create as many custom sidebars as you like and assign each sidebar to different pages on your WordPress site.

Adding Widgets to Your Custom Sidebars

Once you have created custom sidebars and assigned them to different areas of your website, it’s time to add widgets to your sidebars.

Head over to the Appearance » Widgets page. You will notice your newly created custom sidebars among your theme’s default sidebars.

Add widgets to custom sidebar

You can go ahead and add widgets to your custom sidebars. The plugin will now show the sidebars based on your settings. You can visit your selected pages to see it in action.

We hope this article helped you learn how to add different sidebars to each post or page in WordPress. You may also want to see our these WordPress sidebar tricks to get maximum results.

The post How to Display Different Sidebar for Each Post and Page in WordPress appeared first on WPBeginner.

How to Add a Custom Author Profile Page to Your WordPress

Do you want to add a custom author profile page to your WordPress site? Many WordPress themes have limited author profile information on their author archive page. In this article, we will show you how to create a custom author profile page in WordPress. Method… Read More »

The post How to Add a Custom Author Profile Page to Your WordPress appeared first on WPBeginner.

Do you want to add a custom author profile page to your WordPress site? Many WordPress themes have limited author profile information on their author archive page. In this article, we will show you how to create a custom author profile page in WordPress.

Adding a custom author profile page in WordPress

Method 1. Add Custom Author Profile Page in WordPress with WP User Manager

This method is recommended for all users. It is easy to setup and has more features.

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

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

WP User Manager settings page

The plugin will automatically create different pages to use as custom login, custom user registration, forgot password, account, and profile pages.

WP User Manager is a powerful plugin and comes with a lot of options. You need to carefully review them and turn off the features that you don’t want to use.

Next, you need to click on the ‘Profiles’ tab to setup user profile settings.

User profile page settings

Here you can enable profile page option for guests, which means anyone can view user profiles. You can also allow members to view each other’s profiles. If you uncheck this option, then users will only be able to view their own profile pages.

You can also allow users to upload custom profile photo and display their recent articles as well as comments on their profile page.

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

Next, you need to select SEO friendly URLs or permalinks for the author profile pages. You can do this by visiting Settings » Permalinks page and scroll down to the ‘User profile permalink base’ section.

Select a URL structure for user profile pages

The plugin offers you to use user ID, username, or nickname in the URL. Both nickname and username are more SEO friendly options than user ID. Click to select either one of them and then click on the save changes button to store your permalink settings.

Your custom author profile pages are almost ready. Now we just need to let users easily find their profile pages on your website.

Head over to Appearance » Widgets page and add [WPUM] Login Form widget to a sidebar.

Add user login and profile link widget to sidebar

You can now visit your website to see the author profile page in action. As a logged in user, you will see your own account information in the sidebar widget. Clicking on the username will take you to your author profile page.

Author profile page

The sidebar widget will show a login form to logged out users. If you allow users to register on your website, then the form will also include a link to sign up.

The plugin will also change author links on your website and point them to the author profile page instead of the default author’s archive pages.

Changing Appearance of Author Profile Pages

If you just want to change colors or borders, then you can do that by adding custom CSS.

However, if you want to change the layout and order of things, then you will need to edit the plugin’s template files. WP User Manager comes with custom templates support which means you can create your own templates inside your current theme for the plugin to use.

First you need to connect to your website using an FTP client and go to /wp-content/plugins/wp-user-manager/templates/ folder. Download all the files you see there to your computer.

Next, you need to go to your current theme folder and create a new folder “wpum” inside it. Now upload the files you downloaded earlier to the wpum folder.

Now you can edit these files to customize the appearance of your profile pages as needed.

Method 2. Manually Create a Custom Author Profile Page in Your Theme

This method requires you to edit your WordPress theme or child theme files. If you haven’t done this before, then please see our guide on how to copy and paste code in WordPress.

First, you will need to connect to your website using an FTP client and go to /wp-content/themes/your-current-theme/ folder.

Inside your current theme folder, you need to create an author.php file. After that you need to copy the contents of archive.php file and paste them inside your new author.php template.

If your theme already has an author.php file, then you can edit that as well.

Your goal here is to get author’s profile information and then display it. You will need to decide where you want to start editing. Usually, you can edit anything between the get_header(); and get_sidebar() lines.

<?php
// Set the Current Author Variable $curauth
$curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
?>
    
<div class="author-profile-card">
    <h2>About: <?php echo $curauth->nickname; ?></h2>
    <div class="author-photo">
    <?php echo get_avatar( $curauth->user_email , '90 '); ?>
    </div>
    <p><strong>Website:</strong> <a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a><br />
    <strong>Bio:</strong> <?php echo $curauth->user_description; ?></p>
</div>
    
<h2>Posts by <?php echo $curauth->nickname; ?>:</h2>


		 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h3>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
<?php the_title(); ?></a>
</h3>
<p class="posted-on">Posted on: <?php the_time('d M Y'); ?></p>

<?php the_excerpt(); ?>

<?php endwhile; 

// Previous/next page navigation.
the_posts_pagination();


else: ?>
<p><?php _e('No posts by this author.'); ?></p>

<?php endif; ?>

This code simply adds an author profile card at the top of the page, and then displays recent posts by the author.

Feel free to customize this code as much as you need. You can add additional user profile fields to your website, add author’s Twitter and Facebook profile links, display featured images for posts, and so on.

Here is some sample CSS to give your author profile card a decent look. You can add it as custom CSS in your theme and then change it to match your theme colors.

.author-profile-card {
    background: #eee;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}
.author-photo {
    float: left;
    text-align: left;
    padding: 5px;
}

Here is how it looked on our demo website:

A custom author profile page in WordPress

We hope this article helped you learn how to add a custom author profile page to your WordPress site. 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 How to Add a Custom Author Profile Page to Your WordPress appeared first on WPBeginner.