Beginner’s Guide to WordPress Image Sizes (+ Best Practices)

Do you want to learn about WordPress image sizes?

Often beginners ask us about what image sizes they should use on their WordPress site, and how WordPress handles images in different areas.

In this beginner’s guide, we’ll explain common WordPress image sizes, and share best practices on how to know which sizes to use on your website.

What is an Image Size?

Image size usually refers to the width and height of an image measured in pixels. For instance, 1600×900 pixels means an image that is 1600 pixels wide and 900 pixels in height.

These measurements also called image dimensions.

Basically, an image with larger dimensions has more pixels in it which will lead to an increase in image file size.

Image file size is the space an image file occupies on a computer, and it is measured in bytes. For instance, 100 KB (kilobytes).

If an image is larger in file size, then it will take longer to download for users and affect your website’s speed and performance. That’s why it’s important to keep the image file size as small as possible, while keeping the image at the right dimensions.

Which brings us to image file formats.

Image file formats are the compression technologies to save your image files. The most common ones used on the web are JPEG and PNG.

Images like photographs that contain more colors can be better compressed by using JPEG file format.

On the other hand, images like illustrations with fewer color details can use PNG for the best results.

For more details on image file formats, check out our article on how to optimize images in WordPress.

That being said, let’s take a look at what image sizes to use in WordPress for different areas of your website.

What Size Should My Images Be for My WordPress Site?

For an average WordPress website, you’ll be using images in several areas of your website. You’ll need images for your blog posts, thumbnails, page headers, cover images, and more.

WordPress automatically handles some of the image file sizes by default. Whenever you upload an image, WordPress will automatically make several copies of it in different sizes.

You can view and even adjust the default WordPress image sizes by visiting Settings » Media page in the WordPress admin area.

You’ll see three sizes for Medium, Thumbnail, and Large.

However, your WordPress theme may create its own additional image sizes and use those for different sections of your site.

These sizes will not be visible on the Media screen, and the only way to view those additional sizes is by going to the File Manager on your WordPress hosting account.

Then navigate to /wp-content/uploads/ folder and select any year folder there to browse. This will help you see all the various image sizes your WordPress site is generating.

With that said, let’s take a look at different areas of your website, and what image sizes you should use in those areas.

What Image Sizes to Use in Blog Posts

You need to choose image size for your blog posts based on your WordPress theme.

For instance, some WordPress themes come with a single column layout which allows you to use wider images.

On the other hand, some WordPress themes use multi column layouts (content + sidebar) which means you need to adjust the image width accordingly.

For most blogs you can use the following image sizes:

• Single column layout: 1200×675
• Two-column layout: 680×382

Now, you might notice that many popular WordPress websites use the same image width for all their images inside an article. However, this is not a strict rule.

For instance, if you need to add ‘Media and Text’ block, then you can adjust the image size accordingly. In the example below, we are using an image in portrait size next to some text.

Similarly, you may want to use square images for some situations.

For instance, here is an example of square images used in a multi-column layout.

When using square images, you simply need to make sure that the image dimensions have the same width and height such as 300 x 300 pixels.

What Image Sizes to Use for Featured Images

Featured images, also called post thumbnails, are a WordPress theme feature. That means that your theme will determine what size images to display.

For instance, some WordPress themes may use standard 16:9 aspect ratio for featured image sizes (for example, 680×382 pixels).

Some WordPress themes may also use the featured image as a larger header image. To do that, they may need larger images (like 1200×675).

Featured images are important since your WordPress theme may use them in different areas of your website. They’re often the first thing your visitors see, so you’ll want to make a good first impression.

We recommend using larger images, so they still look beautiful whether they’re scaled down or used in wider modes.

Similarly, if your WordPress theme uses square images for featured image, then we would recommend using images that are at least 600×600 pixels.

• For themes that use rectangular featured images: 1200×687 pixels
• For themes that use square featured images: 600×600 pixels

Your WordPress theme will generate additional sizes for featured images to use in different area such as homepage, blog page, or archive pages.

What Image Sizes to Use for Social Media

Now if your WordPress theme is using featured images that are 16:9 in aspect ratio, then you can also use them as social media images for Twitter and Facebook.

However, you’ll need to explicitly tell those platforms which image you want to display when someone shares an article from your website.

To do that, you’ll need the All in One SEO plugin for WordPress. It is the best WordPress SEO plugin on the market used by over 3 million websites. It helps you optimize your website for search engines and social media platforms.

Note: There is also a limited free version of All in One SEO that you can try.

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

Upon activation, the plugin will launch the setup wizard. Follow the on-screen instructions to complete the wizard. You can also see our guide on how to set up All in One SEO for step-by-step instructions.

After that, you need to visit All in One SEO » Social Networks page and switch to the Facebook tab. From here you can set ‘Featured Image’ as your default Open Graph image source.

You can then switch to Twitter tab and do the same.

Don’t forget to click on the Save Changes button to store your settings.

Now, if your WordPress theme used images in a different size, then Facebook and Twitter may not be able to display those images properly.

In that case, you can provide social media platforms with a custom image.

Simply create an image with 16:9 aspect ratio (1200×675 pixels or 680×382 pixels). Then edit the post or page and scroll down to AIOSEO Settings section below the editor.

From here, you need to switch to the Social tab and scroll down to Image source section. From the drop down menu, select Custom image and then upload your Facebook image.

You’ll need to repeat the process on Twitter tab as well.

You will have to do this for all the articles you publish to ensure that social media use the image you want them to use.

For more social media image sizes, see our WordPress social media cheat sheet for beginners.

What Image Size to Use for Website Logo in WordPress

Many WordPress themes will let you know what image size you should use for your website logo.

For instance, our demo theme shows this message when we tried to upload a logo.

However, if you are using a newer WordPress theme with full site editing feature, then you may not get a recommendation for logo image size.

In that case, we recommend uploading different styles and sizes to see what looks best for your brand. A logo image size of 300×200 pixels can be a good starting point.

Editing Images for Your WordPress Website

Most WordPress users are not graphic designers by profession. However, you’ll need to use image editing software to create image sizes for your WordPress website.

WordPress itself comes with some basic image editing tools. To use them, simply go to the Media » Library page and click on an image.

This will open the image in a popup where you’ll see a button to edit image.

This will open the editing options.

The tools include basic image resizing, cropping, rotate, and flipping.

This basic image editing comes in handy if you quickly need to fix an image. However, it is not the best way to edit your images day to day.

Luckily, there are several free and inexpensive options that you can use.

• Canva – free web based image editing software. It also includes ready made templates for website images, logos, social media images, and more.
• Pixlr – A freemium web based image editing software. Can be used to easily resize images for your blog posts.
• Gimp – Free and open source image editing software. It works as a native desktop app on Windows, Mac, and Linux. Can be used to resize images, add layers of text, edit photos, and more.

We hope this article helped you learn more about WordPress image sizes and what image sizes to use on your website. You may also want to see our guide on how to choose the best website builder or our expert pick of best WordPress plugins for small business sites.

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 Beginner’s Guide to WordPress Image Sizes (+ Best Practices) first appeared on WPBeginner.

July 12, 2022 at 04:00PM

How to Make a Multi Vendor Ecommerce Website with WordPress

Do you want to make a multi vendor eCommerce website in WordPress?

A multi-vendor eCommerce website allows you to have multiple vendors and sellers sell their products on your marketplace for a small fee or commission.

In this article, we’ll show you how to easily create a multi vendor eCommerce marketplace using WordPress open source software.

What is a Multi Vendor Ecommerce Website?

A multi vendor eCommerce website is a platform where multiple vendors, sellers, and businesses can add and sell their own products and services.

It is a popular online business idea that allows the website owner to make money online by charging a fee or commission for each transaction.

Some of the most popular eCommere websites like Amazon, eBay, Etsy, are all examples of a multi-vendor eCommerce marketplace.

You can make a multi-vendor site easily for the relatively small cost of making an eCommerce website using WordPress.

That being said, let’s take a look at how you can easily make a multi-vendor eCommerce website without any technical skills.

What Do You Need to Start a Multi Vendor Ecommerce Website?

First you need to make sure that you’re using the right website builder platform to build your multi vendor eCommerce website.

We always use and recommend WordPress because it powers 43% of all websites on the internet. It is a free open source software that also allows you to add multi-vendor features on your site.

To create a multi-vendor website in WordPress, you will need:

• A domain name idea, this will be your website’s name on the internet (think amazon.com, google.com, etc).
• Web hosting account – this is where your website lives on the internet. All websites need web hosting.
• SSL certificate – this allows you to securely accept payments online.

Normally, a domain name would cost you around $14.99 per year and web hosting starts at $7.99 per month (usually paid annually).

This can be a significant amount of money for those who’re just starting out.

Luckily, the folks at Bluehost have agreed to offer WPBeginner users a generous 63% discount on web hosting with a free domain name and SSL certificate.

Basically, you can use our Bluehost coupon to get started for $2.75 per month.

→ Click Here to Claim This Exclusive Bluehost Offer ←

Note: you can of course use any other web hosting provider as well. We have a list of hosting service providers that specializes in WooCommerce hosting because this is the WordPress plugin that we’ll be using for our eCommerce platform.

Once you have signed up for hosting, you can follow our WooCommerce tutorial to install the eCommerce functionality in WordPress.

After that, you’re ready to add the multi vendor functionality in WordPress.

Adding Multi Vendor Functionality in WooCommerce

WooCommerce doesn’t come with support for multi-vendor stores. To add this, you need a WooCommerce multi vendor addon.

We recommend using WC Vendors as the best WooCommerce multi vendor plugin. It is super easy to set up and comes with all the features you need to have multiple vendors set up their own stores on your marketplace.

First, you will need to install and activate the free WC Vendors Marketplace plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: This is the limited free version of the plugin, and it provides only the core functionality. You still need the base free plugin in order to use the premium version of the plugin which has more features. We will cover that in the later steps.

Upon activation, you’ll be asked to run the setup wizard.

Next, you’ll see the first screen of the setup.

From here, you can choose if you want to manually approve vendors, give them shipping and tax options, and set a base commission rate.

Click on the Next button to continue.

On the Capabilities tab, you can fine-tune the user permissions for vendors. These are the actions they can perform on their own products and stores.

Once you’re done, click the Next button to go to the pages section.

WC Vendors can automatically create important pages needed to run your multi vendor store. But if you want to create your own pages, then you can select them here.

If you choose your own pages, then you’ll also need to manually add the shortcodes shown on screen to each page.

We recommend sticking with the default settings here to make the setup easy.

Simply click on the Next button to continue, and then click on ‘Return to Dashboard’ to exit the setup wizard.

Next, you need to install and activate the WC Vendors Pro plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, it will also ask you to run the setup wizard.

On the next screen, you can restrict vendors from accessing the WordPress admin dashboard.

This is a good practice to keep your WordPress site secure.

You can also choose different commission types like percentage, percentage + fee, fixed, and fixed + fee.

Once you select that, go ahead and click on the Next button to continue.

You’ll now see the features that you can enable for the Vendor dashboard. These options will give vendors access to more features to manage their store and products.

Simply choose the features that you want to enable and then click on the Next button.

On the pages screen, the plugin will automatically create a Pro Dashboard page for you.

Optionally, you can also choose a page to display vendor ratings. Simply create a new page in WordPress with the [wcv_feedback_form] shortcode inside it, then select the page here.

After that, you need to click on the Next button to finish the setup. WC Vendors Pro will also give you the option to edit different forms used by Vendors and install extensions to add new features.

You can now return to WordPress dashboard to continue the set up of your multi vendor website.

Setting Up Your WooCommerce for Multi Vendor Platform

Now that you have set up WC Vendor, the next step is to enable user account registration in WooCommerce.

First, you need to create a new page in WordPress and name it Account. Inside the page editor, you need to add the [woocommerce_my_account] shortcode.

Don’t forget to save and publish your page.

Next, head over to the WooCommerce » Settings page and switch to the Account & Privacy tab.

From here, you need to make sure that ‘Allow customer to create an account on the “My Account” page’ option is checked.

After that, switch to the Advanced tab. Under the Page setup section, choose the page you created earlier next to the ‘My account page’ option.

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

Adding a Link to Sign Up as Vendor

Now you have set up WooCommerce for your multi-vendor eCommerce platform. Next, you would want to add links on your site, so that visitors can register as vendors.

Simply head over to the Appearance » Menus page and add the ‘Account’ page you created earlier to your main navigation menu.

If you like, you can rename the navigation menu option to something like ‘Sign in or Register’ or ‘My Account’.

Don’t forget to save your changes and preview your website.

You can quickly see what it looks like for logged-out visitors by opening a new browser tab in incognito mode.

The account page link will appear at the top.

Clicking on it will take users to account registration page where they can apply to become a vendor on your website.

Managing Your Multi Vendor Ecommerce Store

Once users sign up as a vendor, they may be automatically approved, or you’ll need to manually approve them, depending on which option you choose during the set up wizard.

If you need to manually approve them, then simply go to the Users page in WordPress admin area and switch to the Pending Vendor tab.

From here you can approve or deny a vendor application.

After a vendor is approved, they will get a notification and be able to log into their account to manage their vendor store.

From their vendor dashboard, they can add new products to sell, as well as manage orders, store settings, and more.

For instance, your vendors can enter their payment information under the Settings tab.

When Vendors add new products, you’ll get an email notification.

You can then manually approve and publish a product or delete it.

Products on your shop pages will now appear with vendor names.

Users can click on a vendor name to browse more of their products.

Customizing Your Multi Vendor Ecommerce Website Design

WordPress comes with thousands of pre-made templates that you can use to get started. We have made a list of best WooCommerce themes that you can choose from.

Sometimes, you’ll find a theme that matches exactly what you need. However, in most cases, you would want to customize the look and feel of your brand.

In that case, you will need a WordPress page builder plugin like SeedProd. It’s a drag & drop website builder tool that allows you to create completely custom WordPress themes without writing any code.

It comes with pre-made WooCommerce blocks that you can use to customize your product page, cart pages, and every other page on your store.

For more details, see our step by step guide on how to create a custom WordPress theme without writing any code.

Growing Your Multi Vendor Ecommerce Website

Now that you have created a multi vendor eCommerce website, the next step is to promote your website, so that more sellers and customers can find it.

Our team of experts have created a comprehensive list of the best WooCommerce plugins that you need to grow you your online store.

Following are a few of our absolute favorites and must have tools that we recommend:

1. All in One SEO for WordPress – The best WordPress SEO plugin on the market that comes with built-in support for WooCommerce SEO. It’s used by over 3 million websites to rank higher in Google. There’s a free version that you can use as well if you’re on a budget.

2. MonsterInsights – It is the best Google Analytics plugin for WordPress that allows you to setup enhanced eCommerce tracking. This helps you track the performance of products so you can see what’s working on your site.

3. WP Mail SMTP – This helps fix the WordPress email deliverability issues to ensure important website emails like purchase receipts, user registration emails, etc always get delivered in the user’s inbox.

4. WPForms – The best WordPress form builder plugin on the market. It allows you to easily create all sorts of forms that you’ll need to promote and grow your multi-vendor store such as user survey, contact form, polls, etc. There’s also a free version that you can use as well.

5. OptinMonster – It is the #1 conversion optimization toolkit for WordPress. It helps you convert website visitors into leads and customers. You can use it to add special free shipping bars, seasonal promotions, spin a wheel gamifications, and more.

WordPress comes with over 59,000+ free plugins. This is why it’s the top choice for experts when building any type of website including multi-vendor eCommerce stores.

We hope this article helped you learn how to create a multi vendor eCommerce website. You may also want to see our ultimate conversion tracking guide, and our tips on converting abandoned cart sales in WooCommerce.

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 Make a Multi Vendor Ecommerce Website with WordPress first appeared on WPBeginner.

July 11, 2022 at 02:00PM

How to Add Taxonomy Images (Category Icons) in WordPress

Do you want to display taxonomy images or category icons in WordPress?

By default, WordPress does not come with an option to upload a taxonomy image or category icon. It simply just displays a category or taxonomy name on the archive pages.

In this article, we’ll show you how to easily add taxonomy images or category icons in WordPress. We’ll also show you how to display taxonomy images on your archive pages.

Why Add Taxonomy Images in WordPress?

By default, your WordPress website does not come with an option to add images for your taxonomies like categories and tags (or any other custom taxonomy).

It simply uses taxonomy names everywhere including the category archives or taxonomy archive pages.

This looks kind of plain and boring.

If you get a lot of search traffic to your taxonomy pages, then you may want to make them look more engaging.

The easiest way to make a page more interesting is by adding images. You can add taxonomy images or category icons to make these pages more user-friendly and engaging.

A good example of it is a site like NerdWallet that uses category icons in their header:

You can also use it create beautiful navigational sections on your homepage like Bankrate:

That being said, let’s take a look at how to easily add taxonomy images in WordPress.

Easily Add Taxonomy Images in WordPress

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

Upon activation, you can simply go to the Posts » Categories page. You’ll notice the plugin will be showing a placeholder image for your existing categories.

To choose your own category icon, you need to click on the Edit link below a category.

On the Edit category page, scroll down to the bottom and you’ll find a form to upload your own taxonomy image.

Simply click on the ‘Upload/Add New Image’ button to upload the image you want to use for that particular category.

Don’t forget to click on the Add Category or Update button to save your changes.

Next, you can repeat the process to upload images for other category images. You can also upload images for your tags and any other taxonomies as well.

Now the problem is that after adding the images, if you visit a category page, then you won’t see your category image there.

To display it, you will need to edit your WordPress theme or child theme. If this is your first time editing WordPress files, then you may want to see our guide on how to copy and paste code in WordPress.

First, you will need to connect to your WordPress site using an FTP client or your WordPress hosting file manager.

Once connected, you will need to find the template responsible for displaying your taxonomy archives. This could be archives.php, category.php, tag.php, or taxonomy.php files.

For more details, see our guide on how to find which files to edit in a WordPress theme.

Once you have found the file, you’ll need to download it to your computer and open in a text editor like Notepad or TextEdit.

Now paste the following code where you want to display your taxonomy image. Usually, you would want to add it before the taxonomy title or the_archive_title() tag.

<?php if( is_category() ) { ?> 
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>"  alt="" / >
</div>
<?php 
} else {  
//do nothing
} 
?>

After adding the code, you need to save this file and upload it back to your website using FTP.

You can now visit the taxonomy archive page to see it display your taxonomy image. Here is how it looked on our demo archive page.

Now, it may still look a bit awkward, but don’t worry. You can style that using a little bit of custom CSS.

Here is the custom CSS we used for the taxonomy image.

img.taxonomy-img {
    float: left;
    max-height: 100px;
    max-width: 100px;
    display: inline-block;
}

Depending on your theme, you may also need to style surrounding elements like taxonomy title and description.

We simply wrapped our taxonomy archive title and description in a <div> element and added a custom CSS class. We then used the following CSS code to adjust title and description.

.taxonomy-title-description {
    display: inline-block;
    padding: 18px;
}

Here is how it looked afterward on our test website.

Exclude Taxonomies from Displaying Taxonomy Images

Now some users may only want to use taxonomy images for specific taxonomies.

For instance, if you run an online store using WooCommerce, then you may want to exclude product categories.

Simply go back to the Categories Images page in WordPress admin area and check the taxonomies you want to exclude.

Don’t forget to click on the Save Changes button to store your settings.

We hope this article helped you learn how to easily add taxonomy images in WordPress. You may also want to see these useful category hacks and plugins for WordPress or see our tips on getting more traffic from search engines.

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 Taxonomy Images (Category Icons) in WordPress first appeared on WPBeginner.

July 10, 2022 at 07:02PM