CCBS Web Services
Making your site simple!
For more information:
email us
 

CMSMS News: how to auto-fill News item URL field

Category: CMS Made Simple | Last updated: February 2020

CMS Made Simple News module

How to auto-generate an SEO-friendly URL for your news articles at the click of a button. This explains how to extend the Edit Article facility to include an easy way to generate an SEO-friendly URL for News item pages. All that is needed is a minor change to one of the CMSMS templates and a small piece of Javascript.

If you are looking to improve the SEO aspects of your site, making the URLs of your site pages describe the page content is an important one to incorporate.

By making it easier for Google to index your site, you enable your site visitors to interact with your site more effectively.

What do I mean by all of that? Well, here is an example:

Unfriendly URL example

http://some-domain-name.co.uk/index.php?mact=News,cntnt01,detail,0&cntnt01articleid=19&cntnt01detailtemplate=news-detail&cntnt01pagelimit=5&cntnt01returnid=117

Out of the box, a CMSMS News item URL is a bit scary, does not give you a clue as to the page content and definitely not SEO-friendly! Would you click on that link?

In the above example, "Pretty URLs", the CMSMS way of showing SEO-friendly URLs,  have not been enabled. You can read more on how to enable Pretty URLs on the CMSMS web site.

OK. So when Pretty URLs are enabled, the news item page has one of the following URL examples:

Prettier URL

Example #1

http://some-domain-name.co.uk/news/19/117/Here-is-another-post-to-test-the-url-bit

Example #2

http://some-domain-name.co.uk/news/19/117/Here-is-another-post-to-test-the-url-bit/d,news-detail

Example #1 is where a default News::Detail template has been set in Design Manager and the News tag does not include the "detailtemplate" parameter i.e.

{News summarytemplate="news-summary-main" category="cms made simple" pagelimit="5"}

Example #2 is where the "detailtemplate" parameter has been specified in the News tag i.e.

{News summarytemplate="news-summary-main" detailtemplate="news-detail" category="cms made simple" pagelimit="5"}

This looks much better - in either example, the news post title is part of the URL giving you a good idea of what the page is about before clicking on the link to visit it.

And you could stop here and be satisfied.

But this URL would look even better if the highlighted bits were removed. And, if you had your posts organised into categories, you may want your category included in the URL too.

In the CMSMS admin area, the News / Edit Article screen shows a field called URL (slug).  This is where you would enter your pretty SEO-friendly URL for the news item.

But you have to manually re-type the title into this field, together with the category name. And you would have to make sure there were no spaces and had all lower case and no illegal characters such as punctuation.

This is would be a real chore and prone to typing errors.

So, wouldn't it be great if there were a way to copy the news item title field into the URL field, setting to lower case, replacing spaces with hyphens, removing illegal characters, so you get this?

Get your ideal URL ... at the click of a button

Domain name and post title:

http://some-domain-name.co.uk/here-is-another-post-to-test-the-url-bit

Domain name, category and post title:

http://some-domain-name.co.uk/category/here-is-another-post-to-test-the-url-bit

Well you can.
All that is needed is a minor change to the Edit Article template and a small piece of Javascript.
Let's get started!

The out-of-the-box version of the News / Edit Article screen looks like this - the URL (slug) field is further down the screen, after the main content edit area - which is a bit inconvenient:

CMSMS News - Edit Article screen before changes

So, we are going to change some fields around to make it more convenient, amend some field labels and add a button.  Then it will look like this:

CMSMS News - Edit Article screen after changes

Although you can make the following changes directly to the live web site, I would strongly advise against this.  Ideally, you have a test version of your site, either locally on your PC or remotely on a development web server.

6 steps to auto-generate SEO-friendly URL starts here

Step 1: create new directories

So, on your test version of your site, using a file management system, locate your CMSMS root directory. Under the assets/module_custom directory, make a new directory called News.

In this new News directory, create 2 sub-directories called lang and templates respectively.

Step 2: create lang file

In the lang directory, create a file called en_US.php.  Open it up in a text editor and copy in the following lines of code:

Entries for the custom 'lang' file

<?php

$lang['help_article_updateurl'] = 'Click this button to update the URL (slug) with the article title, made seo-friendly by setting to lower case, removing punctuation and converting spaces to hyphens.<br /><b>IMPORTANT: The URL slug must be unique across the site.</b>';

$lang['url'] = 'URL (slug) - seo-friendly url for news article - will be prefixed with article cat value';

?>

Important: make sure you include the opening and closing php tags.

Save and close the file.  If you log back into your CMSMS admin area on your test version, go to the News / Edit Article section, scroll down and you should see that the URL (slug) field now has a new and helpful label.

There is more information about customising language strings on the CMSMS website.

The field is still not ideally located but we will sort that out shortly.

Step 3: copy template file

In your file management system, locate the modules/News directory in the CMSMS root directory. There is a sub-directory called templates and in there a file called editarticle.tpl.

Copy (not cut) this file and paste it into the assets/module_custom/News/templates directory.

We are going to amend the copied file and leave the original one alone. The CMSMS system knows to load the copied file instead of the original file because it has the same name.

Step 4: amend template file - add new button

Open the copied template file editarticle.tpl in a text editor.

If you have never opened up one of these template files, don't panic. It is a mixture of html tags , javascript code and embedded CMSMS tags enclosed in curly brackets.

Scroll down to around line numbers 74-78 - this is the code which outputs the News Category dropdown list in the Edit Article screen and it should look like this:

Lines 74-78 in editarticle.tpl

<p class="pageinput">
<select name="{$actionid}category" id="fld2">
{html_options options=$categorylist selected=$category}
</select>
</p>

Insert the following code after line 78:

New button code for editarticle.tpl

<p class="pagetext" style="background-color: #ccc; color:#000; padding: 3px;">Enter (or re-enter) the article title and/or article cat url BEFORE clicking the Update URL button </p>
<p class="pageinput">
<input type="button" id="updURL" name="updURL" value="Update URL" onclick="setURL(this.form)" />
{cms_help key='help_article_updateurl' title="Update URL"}
</p>

Make sure you include that last closing paragraph tag

So that's the new button code inserted, together with a helpful comment.

Step 5: re-locate URL field

Now let's move the URL field further up the screen so that it is relocated to just  after the new button.

The URL field code is located (using the original line numbers) at lines 114-119 and looks like this:

Lines 114-119 in original editarticle.tpl

<p class="pagetext">
<label for="fld7">{$urltext}:</label>
{cms_help key='help_article_url' title=$urltext}
</p>
<p class="pageinput">
<input type="text" id="fld7" name="{$actionid}news_url" value="{$news_url}" size="50" maxlength="255"/>
</p>

These lines will be further down in the amended editarticle.tpl file

Cut (not copy) these lines and insert them after the new button code.

So now you should have the following lines from line 74 to 93 as follows:

Lines 74-93 in amended editarticle.tpl

<p class="pageinput">
<select name="{$actionid}category" id="fld2">
{html_options options=$categorylist selected=$category}
</select>
</p>
<p class="pagetext" style="background-color: #ccc; color:#000; padding: 3px;">Enter (or re-enter) the article title and/or article cat url BEFORE clicking the Update URL button
</p>
<p class="pageinput">
<input type="button" id="updURL" name="updURL" value="Update URL" onclick="setURL(this.form)" />
{cms_help key='help_article_updateurl' title="Update URL"}
</p>
<p class="pagetext">
<label for="fld7">{$urltext}:</label>
{cms_help key='help_article_url' title=$urltext}
</p>
<p class="pageinput">
<input type="text" id="fld7" name="{$actionid}news_url" value="{$news_url}" size="80" maxlength="255"/>
</p>

Save the amended template file and log back into CMSMS and open up a news item for editing to see the new and re-positioned fields.

OK - that took longer to explain than to do as you will see.

One more step to go.

Step 6: adding the Javascript code

I put my Javascript code into files which I store in uploads/design/js directory. Copy the following code into a new text file and call it something and save it with a .js extension.

Javascript function to set News item URL

  1. function setURL(frm){
  2. var url = frm.m1_title.value;
  3. var prefix = frm.m1_category.options[frm.m1_category.selectedIndex].text;
  4. prefix = prefix
  5. .toLowerCase() // change everything to lowercase
  6. .replace("articles", "") // remove specific string
  7. .replace(/^\s+|\s+$/g, "") // trim leading and trailing spaces
  8. .replace(/[_|\s]+/g, "-") // change all spaces and underscores to a hyphen
  9. .replace(/^-+|-+$/g, "") // trim leading and trailing hyphens
  10. ;
  11. url = url
  12. .toLowerCase() // change everything to lowercase
  13. .replace(/^\s+|\s+$/g, "") // trim leading and trailing spaces
  14. .replace(/[_|\s]+/g, "-") // change all spaces and underscores to a hyphen
  15. .replace(/[^a-z\u0400-\u04FF0-9-]+/g, "") // remove all non-cyrillic, non-numeric characters except the hyphen
  16. .replace(/[-]+/g, "-") // replace multiple instances of the hyphen with a single instance
  17. .replace(/^-+|-+$/g, "") // trim leading and trailing hyphens
  18. .replace(/[-]+/g, "-")
  19. ;
  20. if (prefix) {
  21. frm.m1_news_url.value = prefix + "/" + url;
  22. } else {
  23. frm.m1_news_url.value = url;
  24. }
  25. }

What does this do?

This is called by the onclick event of the new button and does the following:

  • Line 1: get the value of the news item title field
  • Line 2: get the value of the selected category; this is so that I can use the category name in the pretty url
  • Lines 4-10: convert the selected category – see the inline comments
  • Lines 11-19: convert the news item title – see the inline comments
  • Lines 20-24: output the converted value to the form field for the URL

If you don’t want the category name in the pretty URL then remove or comment out lines to do with the “prefix” field in the function.

The JS function that does the URL work needs to be loaded alongside the Edit Article screen. So, just add the following line to the top of your custom template file.

Script tag for JS file at top of editarticle.tpl

<script type="text/javascript" src="../uploads/design/js/ccbs.js"></script>

Change the highlighted bit to whatever file name you used for the JS function and its location.

Customisation is now complete on your test site.
Make sure you test out the new button and check the urls of your News item pages.
Make sure you have enabled Pretty URLs, too.

Good to go live!

If all is well and you are happy that this is working as you expect then you need to do the following things in your live web space:

  • Take a backup of site files and database as a precaution.
  • Enable Pretty URLs (see link above for how to do this)
  • Using your hosting file manager or Filezilla, create new directories (News, lang and templates) under assets/module_custom - see step 1 above
  • Upload the 2 customised files en_US.php and editarticle.tpl to the lang and templates directories respectively under assets/module_custom/News
  • Upload the javascript file to wherever your amended editarticle.tpl is expecting to find it
  • Log into your live site and go into your News / Edit Article to see that all is as expected and that the new button is doing what it should be. You may need to clear cache, though.

And that is it. Enjoy!

Additional information

The code mentioned in this article is from CMSMS version 2.2.13. But I know it works on older versions and in different modules.

I have used this code on version 1.11.x of CMSMS - that is where I initially developed the feature. The editarticle.tpl may be slightly different to the one shown above which is from version 2.2.13.

I had also applied this feature in the Products module when I was using version 1.11.x. I see no reason why the principles of this feature cannot be easily incorporated in the newer version of the Products module.

And, the same goes for the CGBlog module. Again, I have not used this module but its similarities to News make it reasonable to say that this feature should work there, too.

Disclaimer

You use the code contained in this article AT YOUR OWN RISK.

I endeavour to ensure the code given here is a faithful copy of that which I de-ploy on my own sites. But I make no guarantees that it will work on your own site.

I do not accept any liability for the code, its incorporation and usage on your site.

I may withdraw or amend this article at any time without notice.

My website Terms and Conditions apply.

 

Christine CollenBy Christine Collen

 

Please share this page