Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.4 Auto-Slugifying the Title

In this lesson, we're going to write some JavaScript that will automatically populate the slug based upon what we type in the title. Now we do need to be a little bit careful here because if there's already a slug, we don't want to overwrite that. So we do need to take that into account and really, that's going to be very easy to do. So let's start by retrieving title elements. Now we could use jQuery in order to select the elements that we need and use the jQuery API for getting and setting the value of those fields. But for something this simple, let's just use plain ordinary JavaScript. So we first of all want to retrieve that title element because we are going to set up the event listener for the blur event. So that whenever we blur from that field, then we will populate the slug. And let's go ahead and get the slug element. So we will once again use the get element by ID method, believe that ID is slug. And let's first of all check to see if we have a value because if we do Well then we don't want to overwrite it so we will simply return and that way we protect our existing slug. Otherwise, we want to set the value of slug, To the value that we have in our title and we can use this here this is perfectly valid because our header function is running in the context of the title element. Now we want first of all to make the title all lowercase, because our slugs are typically lowercase, we also want to replace all of the white space with hyphens. So let's do this. Let's break this up into multiple method calls and we will start with the two lowercase. That is of course going to convert the text to lowercase. Then we are going to replace all of the non-alphanumeric characters with a hyphen and I guess we should also include a hyphen there as well. If it's a hyphen, we should just leave it and this is going to be a global search and we We will replace those characters with a hyphen. So with that done let's just make sure that this is going to work. Let's refresh the page. And let's first of all remove the slug that we have Inside of the field, then let's focus on the title. Let's blur the title. And there we go, so we at least have most of the slug done but what about if a title begins or ends with a dash? So let's test that I mean, we could just go ahead and leave them but I would think that if the title begins or ends with a dash that we should remove those, so that the slug begins with an alphanumeric character and ends with an alphanumeric character. So let's add another call to replace, and our regular expression will select just the beginning and ending hyphens. And this of course is going to be a global search. As well, and we will replace those characters with an empty string. So with that done, let's go back. Let's refresh the page and we will test this. So let's get rid of the slug. Let's add a beginning hyphen, and a trailing hyphen. So that's whenever we blur out of this. Our slug is While we would expect it to be, the trailing and beginning hyphens are now gone. The Slug is all lowercase. The spaces in between the words are now hyphens and we're good to go there. So let's go ahead and submit this because I like that Slug a whole lot better than date time. Let's go to create new and this is to test slug generation. And there we go I misspelled generation, but who cares? Let's set the date to December 26. The time is fine. This is the xcerts And this is the body. Let's submit, and hopefully we will see everything being correctly saved. And it is. So with just a little bit of JavaScript we have enhanced the user experience. We added a date time picker in the previous lesson. And in this lesson, we auto generated the slug.

Back to the top
View on GitHub