Categories
Website

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 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:

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

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:

>

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

>

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.


>

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:


>

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:

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

tag as well.

approved;
	if ($my_comment_count <10) {
		$my_comment_count = 'new';
	} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
		$my_comment_count = 'emerging';
	} elseif ($my_comment_count >= 20) {
		$my_comment_count = 'popular';
	}
?>

This 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.

>

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.

ID, 'post-class'); ?>
>

It will output the following HTML:

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.



Source link

Categories
Website

How to Turn Your WordPress Site Into a Social Network

Did you know that you can turn your WordPress site into a social network? A WordPress social network allows users to sign up, connect with each other, post messages, and more. In this article, we will show you how to turn your WordPress site into a social network.

Create a Social Network with BuddyPress

Starting your WordPress Powered Social Network

WordPress is the most easy to use platform to build your own social network using the free BuddyPress plugin. It is super flexible and integrates beautifully with any kind of WordPress website.

You’ll need a self-hosted WordPress.org website to start using BuddyPress.

If you don’t have a website yet, then follow the instructions in our how to make a website guide, and you’ll be up and running in no time.

What is BuddyPress?

BuddyPress is a sister project of WordPress.org. It is available as a free WordPress plugin that you can install on your website.

It turns your WordPress site into a social network allowing you to build your own online community. Here are some of the features of a typical BuddyPress powered website:

  • Users can register on your website
  • Users will be able to create extended user profiles
  • Activity streams allow users to follow site-wide updates
  • You will be able to create sub-communities with user groups
  • Users can add each other as friends
  • Users can send private messages to each other
  • BuddyPress functionality can be extended using third-party plugins
  • Works with any standard compliant WordPress theme
  • Can be setup with your existing WordPress site

Setting up Your WordPress Social Network Using BuddyPress

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

Upon activation you need to visit Settings » BuddyPress page to configure plugin settings.

BuddyPress Settings

The settings page is divided into different sections. You’ll first see the components page which shows you currently active BuddyPress components on your site.

The default components would work for most websites. However, you can activate or deactivate a component by simply checking and unchecking the box next to it.

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

Next, you need to click on the Pages tab. Here you can select the pages you would like to use for different BuddyPress sections on your site.

By default, the plugin will automatically create pages for you. You can change them and use a different page if you want.

Setting up pages

If you don’t see the option to select registration and activation pages, then you need to enable user registration on your WordPress site.

Now, you will need to switch to the ‘Options’ tab.

BuddyPress options

Here you will find different settings that you can turn on/off in BuddyPress. The default settings will work for most websites, but you can review and change them as needed.

Displaying BuddyPress Pages on Your Website

If you visit your website after setting up BuddyPress, you’ll not see anything new added to your site. To change this, you need to add BuddyPress pages to your WordPress navigation menu.

Head over to Appearance » Menus page. Select the BuddyPress pages from the left column and click on add to menu button.

BuddyPress navigation

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

You can now visit your website to see the links in action.

BuddyPress links

Clicking on a link will take you to a BuddyPress page. For example, the activity link will show you what’s going around in your BuddyPress social network. You can also post a status update from this page.

Activity page

BuddyPress works with all standard compliant WordPress themes. It also comes with its own templates to use in case your theme doesn’t have BuddyPress specific templates.

If your theme isn’t compatible with BuddyPress, then checkout our list of the best WordPress themes for BuddyPress.

Managing Your WordPress Social Network in BuddyPress

Building an online community requires a lot of active participation by the site admins. You would want to combat spam and moderate user generated content.

If you are already using Akismet, then BuddyPress will use it to catch spam. However, some unwanted content may still slip away.

BuddyPress comes with built-in tools to deal with that.

Head over to the Activity page in your WordPress admin area, and you will see recent activity on your website with different actions.

Managing user activity in BuddyPress

You can sort the activity items by action, delete items, or mark them as spam.

Similarly, you can go to Users page to manage user accounts. You can delete users, edit their profiles, or mark suspicious accounts as spam.

Managing user accounts

You can manage new users by visiting the manage signups page. This allows you to directly activate new users, resend them activation email, or delete spam accounts.

Manage new signups

Creating and Managing Groups in BuddyPress

BuddyPress allows you and your users to create groups. These groups act as sub-communities on your website. Each group can have it’s own members and activity streams. Users can join these groups, invite other users, post messages, and more.

To create a new group, you can head over to the Groups page and click on the add new button at the top.

Add new group

This will bring you to the add new group page. First you need to provide a name and description for your group. After that, click on the ‘Create group and continue’ button to proceed.

Creating a new group in BuddyPress

On the next page, you can select group’s privacy settings and who can invite other users to the group. BuddyPress allows you to create public, private, and hidden groups.

Group privacy settings

Public groups are available for all users to join.

Private groups are listed in the groups directory, but users will have to request to join. If approved, then then they will be able to view its contents.

Hidden groups can only be seen by members who are part of the group. These groups are not listed in the groups directory, and they do not appear in search results.

After setting up privacy options, click on the next button to continue.

Now you can provide a photo to be used as group’s profile photo.

Profile photo for the group

Next, you need to add a cover photo for the group and click on the next button.

Lastly, you can invite other users to join the group. You can only invite users you’ve added as friends. If you haven’t added any friends yet, then you will have to wait for users to discover the group and join it on their own.

Invite users to join group

Click on the finish button and BuddyPress will now setup your group.

Users can view groups by visiting the groups page on your site which shows the directory of groups on your website.

Groups directory

Clicking on a group name will show the group’s page where users can join a group, post updates, and follow group activity.

Group page

Managing Email Notifications

Email notifications are the only way your BuddyPress site can alert users about new activity in their social stream. To encourage user participation, you may want to customize those email messages.

BuddyPress allows you to modify email notifications sent by your WordPress social network. This helps you change the messages to match your site’s branding and tone.

You can visit the Emails page to see the list of default email notifications. You will see the email title, and the situation when the email is sent to a user.

Edit email notifications in BuddyPress

You can click on the Add New button at the top to create a new email notification. You can also click on the edit button below an email message to change it.

Editing email notifications

Lastly, you can also use the email customizer to modify the email colors, header, and footer areas.

Customize emails

Troubleshooting BuddyPress

Many of the issues you’ll come across with BuddyPress will be similar to WordPress issues. Make sure you check our list of common WordPress errors to see if it’s listed there.

If your users are unable to receive email notifications, then follow the instructions in our guide on how to fix WordPress not sending email issue.

For all other issues, check out our WordPress troubleshooting guide to understand what’s causing it, and how to find a solution.

That’s all for now.

We hope this article helped you turn your WordPress site into a social network using BuddyPress. You may also want to see our ultimate step by step WordPress security 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.



Source link

Categories
Website

How Much Does a Custom WordPress Theme Cost?

After writing our article on how much does it cost to build a WordPress site, several readers asked us to expand on the custom website cost section. If you’re wondering how much does a custom WordPress theme cost, then you’re in the right place. In this article, we will share how much does a custom WordPress theme cost as well as few tips on how you can save money and avoid overpaying.

Cost of a Custom WordPress Theme

What is a Custom WordPress Theme?

A custom WordPress theme has a unique design, layout, and set of features that are made specifically for your business needs.

Since there are thousands of free and premium WordPress themes available, a custom WordPress theme helps your company / brand stand out.

The benefit of getting a custom WordPress theme is that you’re not limited by the constraints of a pre-existing template or layout. You have full freedom to customize your website and get any specific functionality built within your theme.

Factors that Affect the Cost of a Custom WordPress Theme

Since each custom WordPress theme is built specifically for the individual client, the cost of the project varies based on the requirements. Below are some of the factors that will impact the cost of your custom WordPress theme:

Individual Freelancer vs Agency

To create a custom WordPress theme, you will need someone who can design (designer) and code your theme (developer).

Depending on your needs, you may be able to find an individual who can do both design and develop the site, but remember it’s hard find a person who’s excellent at both design and code.

When you go with a full-service agency, it’s a one-stop shop because they have designers and developers in their team. This is also the reason why sometimes agencies can be more expensive.

Alternatively, you can hire an individual freelance designer and developer separately and mange the project yourself.

Experience and Expertise

Design and development is a creative process, so the project cost vary based on expertise, experience in the field, and creativity.

Well reputed WordPress development agencies may cost more than an individual developer or freelancer. However, a well known WordPress developer can sometimes charge even more than an agency.

Features, Functionality, and Expectations

Adding more features and functionality to your custom theme will increase the development time and cost. Normally, clients have higher expectations than their budget allows.

High quality work with custom features will take more time and hence it will cost more.

Change orders and Revisions

If you change the scope of your custom WordPress theme project in the middle of the process, then this can significantly increase your cost. While minor changes are ok, often freelancers and agencies will charge change-order fees for major change requests.

Hosting, Maintenance and Support

A custom WordPress theme does not include WordPress hosting, website maintenance or offering support after delivery of the project.

Some agencies and freelancers might offer these services at an additional cost.

How much a Custom WordPress Theme Actually Costs?

Cost estimates for a custom WordPress theme

Because there are several factors that affect the cost, it is extremely difficult to explain how much a custom WordPress theme cost in fixed numbers.

A typical custom WordPress theme for business or personal website theme could cost between $1,500 – $5,000.

A custom WordPress theme with additional built-in features or companion plugins can cost anywhere between $6,000 – $10,000.

If you have a complex enterprise level project, then is not uncommon for the prices to go above $30,000.

How to Avoid Overpaying for a Custom WordPress Theme?

Controlling cost of your custom WordPress theme project

With over a decade of experience in the WordPress industry, we have few tips that you can use to avoid overpaying for a custom WordPress theme.

Have a Clear Scope of the Project

When you’re building a house, you typically have a list of features that you want such as 4 bedrooms, 3 bathrooms, living room, etc.

You need to make a similar list for your website and list down all the things that you would like to have such as:

  • Editable home page with a testimonial slider and services list
  • Contact page with a contact form and a Google map with ability to find directions
  • Gallery area to showcase the work
  • Blog section with Social media share buttons

Having a detailed list makes it easier for someone to give you an accurate quote. It also helps limit revisions / change-order fees.

Find Live Website Examples for Inspiration when Possible

Going along with a detailed scope, having a list of inspirations really help with the design process.

You can have a list of websites and list out what you like about each of them.

This gives the designer a clear idea of what you’re looking for thus reduces the revisions and overall cost.

Use Premium Plugins vs Custom Built Functionality

Most reputable WordPress professionals will always choose a premium WordPress plugin vs build it out from scratch because it’s more efficient and saves cost.

However as a customer, we always recommend that you also do your research. Often the developer that you choose may have other suggestions, and it’s important that you understand why they decide to choose one plugin over another.

Customize Premium Themes vs Build from Scratch

One of the ways to significantly reduce cost while still getting a “custom” look and feel is to find an existing theme that has 90% of what you want.

While this cheats the custom theme concept, it can significantly reduce the overall cost.

Powerful drag and drop WordPress page builders like BeaverBuilder and Divi has given birth to an entirely new industry of “Website Assemblers”.

Professional website assemblers use existing WordPress plugins in combination with a drag & drop page builder to build you a custom-looking WordPress site at a much more affordable price.

How to Find the Right Developer or Agency for a Custom WordPress Theme

Finding developer for your custom WordPress theme

Due to its ease of use and low barrier of entry, there is a wide-range of people and companies offering custom WordPress theme services.

Finding a developer or agency with right experience and skill set can be a bit difficult. Specially because a lot of “website assemblers” also call themselves developers.

Here are some places where you can find experienced developers for your custom WordPress theme project.

Genesis Developers – StudioPress, creators of the famous Genesis theme framework has a developers showcase where you can find experienced WordPress developers to work on your custom theme.

WPEngine Consultants – Managed WordPress hosting company, WPEngine, also has a dedicated page that lists experienced WordPress developers and agencies.

WPHired – This is a job board where you can post your WordPress jobs. Developers can then apply for the job, and you can discuss your project with them. You’ll have to look for developers with relevant experience and skills.

WordPress Jobs – Another WordPress specific job board where you can post jobs and interview developers.

Upwork – An online freelancing website where you can post your job and interview developers from all over the world. This would allow you to find developers with lower rates. It is an enormous community with designers and developers of varying skills and expertise.

Conclusion

A custom WordPress theme can make your website stand out with its unique design and custom features. However, not all beginners and small businesses can afford that right away.

If you are just starting out, then you can use a premium multipurpose theme and build your website at a fraction of a price.

Most modern themes have enough customization options that you can use to make them unique. Check out our showcase section where we regularly publish collection of themes for different industries and niches

However if you can afford a custom WordPress theme, then it is definitely worth the investment. Unique branding, custom design, and tailor made functionality will help you grow your business faster and give you an edge over your competitors.

We hope this article helped you understand how much does a custom WordPress theme cost and how you can avoid overpaying. You may also want to see our list of most notable big name brands using 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.



Source link