Author: Đạt Trần

Posted on by — Leave a comment

How To Exclude Custom Post Types, Posts, Pages From Yoast SEO Sitemap

How To Exclude Custom Post Types, Posts, Pages From Yoast SEO Sitemap 1

If you want to exclude certain custom post types to the sitemap that generated by Yoast SEO plugin, you are at the right place. In this short post, I’m going to show you exactly how to do that.

Requirements

The only requirement is you need to install my plugin. This is the one I made to solve my own problem. As you can see, I created a plugin called WP Lead Plus X that generates landing pages. It created two custom post types to handle the template files.

I don’t want include those files in the sitemap since they have short content and usually don’t reflect the topic of my main website.

Download the plugin to exclude custom post types from Yoast SEO sitemap below

Exclude Custom Post Types From SEO Sitemap

How to configure what post types to exclude from Yoast SEO site map

Now I assume that you have installed and activated the plugin. In your dashboard, you’ll see it appears under Binary Carpenter:

How To Exclude Custom Post Types, Posts, Pages From Yoast SEO Sitemap 2

Click on that, you’ll find a very simple interface:

How To Exclude Custom Post Types, Posts, Pages From Yoast SEO Sitemap 3

As you can see, the plugin lists the custom post types available on your site as an unordered list. In my example, I have three custom post types:

  • product
  • core37_lp
  • core37_lp_template

Now, for example, I want to exclude core37_lp and core37_lp_template post types from the sitemap. I’ll enter them into the textarea box below, comma delimited:

How To Exclude Custom Post Types, Posts, Pages From Yoast SEO Sitemap 4

Before clicking on the save settings button, let me show you my current sitemap:

How To Exclude Custom Post Types, Posts, Pages From Yoast SEO Sitemap 5

As you can see, my custom post types are showing in the sitemap. Let me save changes and reload the sitemap again:

How To Exclude Custom Post Types, Posts, Pages From Yoast SEO Sitemap 6

As you can see, the new sitemap doesn’t have the custom post types that I excluded.

Bonus feature

As you can also see in the plugin, you have the ability to exclude certain pages/posts from the sitemap. Simply enter their IDs as comma separated list and they’ll be exclude from your Yoast SEO sitemap.

Conclusion

I hope this plugin is useful to you. Note that it works with Yoast SEO sitemap only.

Posted on by — Leave a comment

How To Get Responsive Image HTML Code From Media Library

responsive wordpress image

If you’ve been using WordPress for some time and know at least some HTML, you may have put an image tag some where on your site. That could be in a custom widget on your sidebar or footer.

If you put the img code the old way, your code may look like this:

<img src="path_to_image_file" title="" alt="" />

However, modern image code should have srcset attribute. This attribute helps you serve different images on different devices, thus save you some bandwidth and your visitors some waiting time. If your image code doesn’t have that attribute, you are not doing what is best for both you and your visitor.

How to get img code with srcset in WordPress

By default, WordPress images come with srcset. If you look at the images you added through add media button, you can confirm this. However, if you get the file straight from Media Library, all you have is the direct link to the image file.

Recently, I faced this problem and created a code snippet to solve the problem. I would recommend you put this code inside the functions.php file of your child theme. (Don’t know what a child theme is or how to create one? Check out my child theme tutorial here)

The code snippet

function bc_responsive_image_output( $form_fields, $post ) {
     //if the attachment is not an image, don't do anything
     if (!wp_attachment_is_image($post->ID))
             return $form_fields;
     $html_code = '';

     $html_code .= sprintf('<div><label>Thumbnail</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID ));
     $html_code .= sprintf('<div><label>Medium size</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID, 'medium'))    ;
     $html_code .= sprintf('<div><label>Large size</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID, 'large'));
     $html_code .= sprintf('<div><label>Full size</label><textarea>%1$s</textarea></div>',wp_get_attachment_image($post->ID, 'full'));

     $html_code = '<div id="bc_image_codes">' .$html_code . '</div>';
     //generate image embed code
     $form_fields['location'] = array(
         'value' =>'',
         'label' => __( 'Responsive image HTML cod3' ),
         'helps' => __( 'Copy the code below ' ),
         'input' => 'html',
         'html' => '<style>#bc_image_codes label, #bc_image_codes textarea { display: block; }</style>' . $html_code

     );
     return $form_fields;
 }
 add_filter( 'attachment_fields_to_edit', 'bc_responsive_image_output', 10, 2 );

If you are interested, here is a brief explanation on how the code works. Literally, I added the image HTML code inside each attachment (if it is an image) in the media library when it is clicked.

How to get the responsive image HTML code inside Media Library

So, I assume that you have saved your functions.php file. Now, go to Media->Library. If you click on any image in your media library, you’ll see this:

responsive HTML image code in WordPress Media Library

As you can see that, there are different codes for different image sizes. If you want thumbnail size, copy the code in the thumbnail box, if you want full image size, get the code in the full size box and so on.

Conclusion

As you can see, the snippet is quite simple but it helps me get the responsive image HTML code on WordPress. Next time you find yourself enter image code manually, stop and use this code instead.

Posted on by — Leave a comment

Why Your WordPress Site is not Responsive? Two Possible Culprits

Recently, I as fed up with my theme and I decided to make my own theme to optimize for page loading speed. And indeed, my performance score went from 70-ish to 100. However, after a few days, I received report from Google Search Console that some of my pages are not responsive.

I checked every items in my common responsive check list, including:

  1. Content must not be wider than its parent
  2. Max images’ width is 100%
  3. Columns collapse on to fit 100% width on small screen

After spending almost 3 hours in front of my screen, I figured out two culprits that made some of my post not responsive. This may not be applicable to you but it’s worth a try if you don’t know what’s the cause.

Figure element with a fixed width that caused page not responsive

The first problem I found is I have my image wrapped inside a figure tag. At first, I don’t understand why WordPress does this on some of my images and doesn’t on other. It turned out if your images have caption, they will be wrapped in a figure tag with a fixed width.

You can remove the width attribute of the figure element to fix the problem.

If your page is still not responsive, removing the caption solves the problem instantly.

Code highlighter could be problematic too

If you are using code highlighter like what I have on my site, you could be the next victim of long line of code. Normally, code highlighters have no problem with short string (variable, function name…). However, if you code contains long string such as long function name or long file path, your content could be much wider than it should be.

What’s the fix? Add this rule to Additional CSS (Under Appearance -> Customize)

article {
    word-break: break-word;
}

 

This code tells the browser to break long words in to multiple lines. Save the changes and check your site again (make sure to clear your cache).

If your site is responsive now, it’s great. If it isn’t, please let me know in the comment below. There maybe other factors that cause your problem.

Conclusion

By no mean this is an exhaustive list of fix for site not responsive. However, these are the new problems I have encountered. Hopefully, the tips in this post is useful to you.

Posted on by — 1 Comment

How To Add/Remove Sidebar To WooCommerce Shop Page

Customizing WooCommerce shop page is not an easy task, especially for people who don’t know code. However, if you follow this tutorial closely, you’ll have no problem adding or removing sidebar to your WooCommerce shop page. Let’s get started.

Understand shop page template

Your activated theme usually comes with many .php files. Some of them are template files, which the file that tell how content should be displayed on your site.

To display shop page, WordPress first look into your current theme folder to find a file named “archive-product.php”.

If that file is available, then it will use that file to display your shop page.

If that file is not available, WordPress will find a file named archive.php. If the file is found, the search stops and archive.php will be used to display your shop page.

If both archive-product.php and archive.php are not found, then WordPress will use index.php to display the shop page. index.php is available in all serious WordPress themes.

Steps to add/remove sidebar to WooCommerce Shop page

Now, let’s get our hands dirty. Our plan is first, create child theme of your current theme, then activate it. After that, we create a file called archive-product.php in that child theme and customize that file to achieve our desired result.

Step 1: Create a child theme and activate it

If you are not familiar with child themes and don’t know how to create one, I’ve made a child theme tutorial here. Please create one first then come back here when you are that child theme activated. Don’t worry, your current looks and feels of your site is safe.

Step 2. Create the file archive-product.php in your child theme folder

You need to access to your server to get this step done. You can either use FTP or cPanel or SSH to login to your server, navigate to your child theme folder and create archive-product.php file. Then, copy and paste the content from here to that file.

Now, we are ready to either add or remove sidebar from our shop page.

Step 3. Add sidebar to your WooCommerce shop page

If you view your shop page now, you’ll see that it now has a sidebar. Why is that? Because of this part in the template file:

adding-sidebar-to-woocommerce-shop-page

So, if you want to add sidebar to your shop page, you are done. How great is that?

Step 4: Remove sidebar from your shop page

If you want to remove sidebar from your shop page, there are extra works. Remember from the step above, I mentioned that parts that display the sidebar? Well, we need to remove that.

So, I’m going to comment out the the two lines that I underlined red in the screenshot above by adding a double slash at the beginning of the line.

comment out sidebar to hide it in woocommerce shop page

Now save the file and view the shop page, surely you’ll see no sidebar:

sidebar removed from shop page

 

However, if your shop page looks like mine, there are more works to do. We need to make the products fill the width of our page, not leaving a blank space on the right like this.

Step 5: Make the shop page content full width

Now, you need to add some custom CSS code to make the shop page full width. So, the first step is to find the CSS selector of the part that contains the products.

On Chrome, right click on any place on your page and select inspect. If you know CSS, you have no problem finding the container. However, if you don’t know CSS, let’s hover the cursor over the elements in the inspection window (the window appears after you select inspect) until you see this:

finding product list class

This is the right element to pick CSS selectors.

So, in my case, the CSS selector would be:

.product-wrapper.products-list

And here is the rule I put in Appearance->Customize->Additional CSS:

.product-wrapper.products-list {
    width: 100%;
}

If you view your shop page now, you’ll see the products occupy full page’s width.

If this is your desired result, congratulations!

Conclusion

Adding and removing sidebar from WooCommece shop page requires a bit of coding. However, I hope you find the tutorial is easy to follow. If you have any question or need help with your shop page, please leave a comment below.

Posted on by — Leave a comment

The Ultimate Guide to WooCommerce Product Shortcodes

woocommerce shortcodes

WooCommerce supports a long list of shortcodes that you can find here. This post covers only WooCommerce products shortcodes, which are the ones that display products only. Let’s go over them step by step.

Quick shortcodes to display your products

Display all products

If you want to display all products on your store, simply use this shortcode:

display all products shortcode

Display featured products

To display all WooCommerce featured products on your store, use this shortcode:

display all featured products shortcode

Display all on-sale products

To display all on-sale products, use this shortcode:

all sales products shortcode

Display all best selling products

To display best selling products, you can use this shortcode:

best-selling-products-shortcode

Customize the display of products with attributes

Now you know all the important shortcodes to display WooCommerce products. However, what if you want to specify how many products per line, per page…? This is where attributes come into play.

Specify how many products per row with columns

If I want to display three products per row, I’ll use this shortcode:

specify number of products per row

And sure enough, I have a page with all of my products, 3 items on every rows:

specify number of products per row

I only write the shortcode with products, however, the same logic can be applied to all the shortcodes above (featured_products, sale_products…)

Limit number of products to display with limit

If your store has many products, it’s wise to limit the number of products to display with the limit attribute.

For example, the following shortcode limit only 9 products to display:

The Ultimate Guide to WooCommerce Product Shortcodes 7

Of course, you can combine multiple attributes together to achieve more complex display. The following shortcode display 10 products, 5 per line:

combine multiple shortcode attributes

Products pagination with paginate

In case you have multiple products and you want to display them in multiple pages, the paginate attribute is what you need. You also need to set how many products you want to display PER PAGE with the limit attribute.

For example, the following shortcode display all products in multiple pages, 4 products per row, 12 products per page:

The Ultimate Guide to WooCommerce Product Shortcodes 8

Display products from specific categories

There are times you don’t want to display all products. Instead, you only need products from specific categories. In this case, you can specify the list of category slugs in your shortcode:

display-products-by-category

In this example, I want to list products from 3 categories which have their slug as hdd, ram, ssd accordingly.

How can you find product categories’ slugs? Simply go to Products->Category and look for the slug field of the categories you want:

how to find product category slugs

Set products’ order by order and orderby

By default, WooCommerce display products order by their title. However, you can change this behavior by using order, and orderby attributes.

The available value for orderby are:

date – The date the product was published.
id – The post ID of the product.
menu_order – The Menu Order, if set (lower numbers display first). This can be set for each product in product data tab
popularity – The number of purchases.
rand – Randomly order the products on page load (may not work with sites that use caching, as it could save a specific order).
rating – The average product rating.
title – The product title. This is the default orderby mode.

There are only two available value for order:

ASC: ascending, products that have lower value (as specified by orderby) come first

DESC: opposite of ASC

For example, I want to display all products, order by rating in descending order, I would use this:

The Ultimate Guide to WooCommerce Product Shortcodes 9

Conclusion

As you can see, shortcodes can be very powerful if you them correctly. The list above is not exhaustive. If you have suggestion or request, please let me know.