How to display excerpt with fixed character length?

How to display excerpt with fixed character length?

WordPress shows 55 words in its default excerpt. What if you need to limit the character length of the excerpt in WordPress instead?

When do you need to fix the character length of the excerpt?

You know that some words can be very long and some short. Because of this, default excerpt of the WordPress varies in character length. There are some cases when you need to have excerpt of fixed lines. For example, you want to show posts in gridview and want all the post grid with same height. (You can take the homepage of our website as an example.) In this case, you have two options, either fix the height of grid by CSS and hide the overflowed text (as done in our website) or pull excerpt with fixed character length only.

Here, we are going to learn how to get excerpt of fixed length of character.

How to display excerpt with fixed character length?

You can do this with the help of a simple function. You need to put this function in the functions.php of or your theme and then call it whenever you need excerpt with fixed character length.

Here’s the code of the function:

  // For excerpt with charlength as asked
function the_excerpt_max_charlength($charlength) {
	$excerpt = get_the_excerpt();
	$charlength++;

	if ( mb_strlen( $excerpt ) > $charlength ) {
		$subex = mb_substr( $excerpt, 0, $charlength - 5 );
		$exwords = explode( ' ', $subex );
		$excut = - ( mb_strlen( $exwords[ count( $exwords ) - 1 ] ) );
		if ( $excut < 0 ) {
			echo mb_substr( $subex, 0, $excut );
		} else {
			echo $subex;
		}
		echo '[...]';
	} else {
		echo $excerpt;
	}
}

Now, wherever you need to echo excerpt, you need to call this function:

<?php the_excerpt_max_charlength(140); ?>

In above function call, you’re sending 140 as parameter. This parameter is actually the character length that you want to be shown. Sending 140 as parameter echos excerpt with 140 characters.

Wrapping Up

Limiting the character length of excerpt helps in different contexts. This easy to implement function is what I am using in my projects. You can try it in your site. If you have any question about it, you can put them below in the comment box. I’d love to help you as far as possible.

Lots more important posts are awaiting you. So, keep following WPCounsel.

How to add advanced meta box to your WordPress theme

How to add advanced meta box to your WordPress theme

If you’re WordPress theme customizer, you should have come to the situation when you need to add advanced meta box to certain post types of your. You can easily create simple post types with input field, textarea, radio buttons, checkboxes, etc. But, what if you need some complex options like file uploader? You’d have to struggle a lot to get things right, isn’t it?

Well, recently while building a WordPress theme for one Podcast website, I came across with similar situation. I had to struggle a lot for right coding for brilliant audio uploader field in the metabox which I had to place for ‘post’ post type. I wrote code myself but couldn’t get satisfied completely with it. On the other hand, I was on the tight deadline as well. As per my motto, I must give brilliant service to my clients. So, how would I do it?

Meta Box plugin!

Yes, sometimes plugin is what fits best to your requirements. And you get the right free plugin available in WordPress plugin repository, what would you look for?

I installed Meta box plugin and looked for its menu. I was too much surprised when I didn’t find any menu of this plugin. Now, how would I create meta box? I again googled about it. And, soon I landed to Online generator of page of it’s official website.

Online generator of Meta box plugin

I started to fill up the form as per my requirement. I was so much surprised when I saw huge range of fields for meta box. It has all sorts of powerful field ranging from input fields to file advanced, image advanced, taxonomy, user and many more. What I needed was a text input field and a file advanced field. I clicked them, arranged them and finally hit on the ‘Genarate Code’ button. I got pretty clean code.  After this all I had to do was paste this code to functions.php file.

fields in online generator of Meta Box plugin

Bingo! I got awesome meta-box without any hassle. And, as it’s well tested and well-developed plugin, I need not worry about quality. I found it really awesome!

Wrapping up

Sometimes, plugin is what you are exactly looking for. And, Meta Box plugin is so much powerful that you need not worry about anything. Well, there would be problem if your clients don’t install it. So, for this issue, I placed TGM Plugin activation in the theme and configured it to ask theme user to install Meta Box plugin from WordPress repository. Pretty simple right?

We’ve lots more WordPress resources coming up. So, keep following WPCounsel.

How to move Comment box field below other fields in WordPress comment form

How to move Comment box field below other fields in WordPress comment form

By default, WordPress comment field has comment box (Textarea) above other fields (name, email address and URL). Do you know how to move comment field below other fields?

Comment form with comment box above

Comment form with comment box above

I was recently developing WordPress theme for a Podcast website. I was provided HTML/CSS theme and was hired to convert it to WordPress theme. As per the design, I’d to place comment box below other fields. But, WordPress by default outputs comment box above. So, I needed a solution to solve this issue. After doing some research, I found an easy fix for this issue. I’m calling this an easy fix because all you’ve to do is place a function in functions.php and then you’ll see the magic!

Here’s the code (with function) that you’ve to add in functions.php of your theme:

function wpc_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}

add_filter( 'comment_form_fields', 'wpc_move_comment_field_to_bottom' );

After you add above code in functions.php, comment field automatically moves down. This is how comment box looked in the website after I added above code:

Comment form with comment box below

Comment form with comment box below

Isn’t is really simple?

Wrapping Up:

If you have any question related to this post, please leave a comment below. I’d love to hear your comments and help you to the fullest. And, keep following WPCounsel for the latest WordPress resources.

How to edit .htaccess file of WordPress website from WordPress Dashboard

How to edit .htaccess file of WordPress website from WordPress Dashboard

.htaccess is the configuration file of Apache web server which defines who can/cannot access files of the website. Besides, it also defines the permalinks of the website using WordPress. You generally need not touch .htaccess file. But, in some case you are asked to add certain code in the .htaccess file. In such situation, you generally face trouble as you need to have either FTP connection to your web server or need to have cpanel access.

Do you know that you may already have the tool to edit .htaccess file of your WordPress website?

Yes, if you have installed Yoast SEO plugin, you already have a tool to edit .htaccess file. In this article, I’m going to show you how you can do  it easily from Yoast SEO plugin. Now, let’s begin.

Step 1:

Log in to the WordPress Dashboard.

Click on the SEO >> Tools menu.

Open tools menu of Yoast SEO

Step 2:

You’ll land on the Tools page of Yoast SEO.

Click on the File Editor as shown on the following screenshot.

Click on File Editor

Step 3:

File editor of Tools page opens. This page allows you to edit Robots.txt file and .htaccess file as shown in this screenshot.

Edit .htaccess file and save changes

After you edit the .htaccess file, click on the Save changes to .htaccess button.

Congratulations! You have successfully edited .htaccess file of your WordPress website from your WordPress dashboard.

Wrapping up

You shouldn’t edit .htaccess file unless you’re suggested from credible source or you know exactly what you are doing as it is very critical file. If you’ve any question or suggestion, kindly put that below as the comment.

We’ve lots more articles related to WordPress on the way. So, keep following WPCounsel.

Solution: No ‘Access-Control-Allow-Origin’ header is present on the requested resource error

Solution: No ‘Access-Control-Allow-Origin’ header is present on the requested resource error

I recently installed Divi theme in one of my website. After activating Divi theme, I saw some visual error in my website. Some icons weren’t showing up well. For example, I was seeing ‘5 instead of ‘> icon and ‘U‘ instead of search icon. It was huge visual hindrance for the website. So, I started to do research on this issue.

On inspecting the error, I saw an error which said ‘No ‘Access-Control-Allow-Origin’ header is present on the requested resource…‘. My website is using SSL certificate and thus is accessible through https links. The icons may be in http link. As Chrome doesn’t allow cross domain access by default, I should have seen this error. What I need then was good solution to this issue. And, I got my solution after spending some half day researching over internet.

Solution to “No ‘Access-Control-Allow-Origin’ header is pres…” error:

Open the main .htaccess file of your website. It’s in the directory where you’ve installed WordPress. It may hidden if you are looking from the file manager of CPanel. In that case, click on the setting and check the checkbox show hidden files as shown in following screenshot:

Show hidden files in cpanel file manager

Edit the .htaccess files and add following code:

# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Above code solved the issue in my website. But, if it doesn’t in your case, you can add following code above the code we added just before:

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>

This should have certainly solved your issue.

Wrapping up

I hope this article was useful for you. If it doesn’t solve your issue or you’ve better solution to this issue, please let me know from the commen/t box below. I’ll be looking forward to your comments and suggestions. And, we’re posting new articles in almost every two days.

So, keeping following wpcounsel.

Should I protect my WordPress website with SSL certificate (https)?

Should I protect my WordPress website with SSL certificate (https)?

You certainly have seen several websites with https in their link. In such website you see a padlock symbol followed by ‘Secure’ in the address bar of your web browser. These are actually the websites secured with SSL certificate. What actually is SSL? How does it make your website secure? Should I protect my WordPress website with SSL certificate? These are the questions that we’re going to deal in this article.

What is SSL?

SSL is the standard security technology to establish encrypted data exchange between web server and web browser. SSL stands for Secure Sockets Layer. It ensures that data being shared between web server and a browser is private and integral. It has been used by millions of websites to keep their online transaction and data transfer highly secure. Even our website also uses SSL.

If your website is secured by SSL, browsers make request to your server with https link rather than http. On the first request, your web server replies with your SSL certificate. Browser checks the certificate and verifies if it can trust it. It checks if the certification authority can be trusted and if your certificate hasn’t expired. If it cannot trust the certificate (generally happens in case of self-signed certificate) and if the certificate has expired, it warns the viewer about the security risks and recommends not to use the website. When browser finds it trustworthy, it then requests the web server for more data of the page. On receiving such request, web server starts sending the encrypted data. Your browser decrypts it with public key and then displays it to you. Your browser also encrypts the data when it sends it to sever. This way secure exchange of data then continues in the session.

Why should I use SSL certificate on my WordPress website?

There are primarily two major reasons for which you’d like to use SSL certificate on your WordPress website: data security and SEO benefit.

Data security by SSL certificate

Data security first and the foremost importance of using secured connection. If your WordPress website is online shopping site, or have to do data exchange of sensitive data like credit card details or even if privacy of data being exchanged is very important, in that case you must use SSL certificate in your website. If you use SSL certificate, your customers can trust you. Else, they wouldn’t use your service.

You may have seen https links in all email services like gmail, yahoo, etc. It’s all for data privacy. With SSL certificate, we can be ensured that emails that we received isn’t tampered and stolen anywhere in between server and browser. If somebody tries to steal data, what they get is highly encrypted data which is of no use to them.

SEO benefit on https website

Google has announced that if is providing ranking benefit to https website secured by SSL certificate. If two pages have similar SEO weightage, Google will now show the page protected with SSL certificate before the one with http link. It is certainly big boost as you’re going to beat your non-https competitors easily without doing anything special. In my personal experience, I’ve seen the links of websites with https links more often in first page of google search. So, I’m sure that they are getting some SEO benefit just for having SSL certificate in their website.

Wrapping UP

Protecting your website with SSL certificate is always the good idea. But, while moving to https, you need to be clear about the complexities as well. First of all, most of the certification authorities charge you for SSL certificate. Certificates have expiry date. So, you need to ensure that your website’s SSL certificate hasn’t expired. If it’s going to expire, you need to update it immediately. In addition to that, you need to understand that your website will be slightly slow (if well-managed it will be of few milliseconds only) when you use SSL certificate.

We’ll be discussing more about WordPress website security in upcoming articles as well. So, keep following WPCounsel.