END-MARKS ARE A typographical feature, most probably derived from the technology and computer-science industry, that employs a use of a symbol, text or icon to signal the end of a piece of text to the reader.
Personally, I am a great fan of end-marks, and I was using them in my first blog at WordPress.com but things changed later and, (unless I manually inserted them every time,) I had no way of fitting one into my articles… until now!
[hr_padding] [hr_padding]As magazine features
If you have ever seen an end-mark before, it is probably in a magazine, at the end of every article (see picture below for examples.) Apart from being typographically good looking, these things serve to signal a more finished end to an article, much like a full stop does to a sentence. Once I managed to write a handful of code, I began employing end-marks on this website as my regular readers would probably have noticed.
As I said already, manually inserting end-marks after every article is a tedious job; but, on the other hand, it cannot always be fully automated either. For instance, Colin Temple has a great endmark plugin that appends an end-mark of your choice to your articles.
[hr_top] [hr_padding]Endmark plugin
However, as I found out myself, if you have meddled with some of the code previously (or even if you have not, in some cases,) such as including certain sharing options after your blog post etc., the sharing buttons come wrapped into the main content division (they even do so native-ly on some themes) and you end up with an endmark after the sharing options, which can turn out to be awkward.
Colin’s plugin has some other features that need working, as he says on the website himself, but — if you care enough about your blog to remember adding an end-mark — I have a quick and foolproof solution for you with one of WordPress’ best introductions: shortcodes.
I have not come up with a method to fully automate it for the same reasons stated earlier, but if a code as simple as [x] is too hard to type in, then this exercise is not for you!
[hr_top] [hr_padding]What is a shortcode?
Ever since WordPress introduced shortcodes, the platform — and well neigh the blogosphere itself — has begun a sort of new era in that clients can do quite a bit of flexible work themselves now.
Basically, a shortcode is a small piece of text that signals the browser to do something a programmer has pre-programmed into your website. For instance, if I pre-programme a code into your website to print a red block every time you type in [red] then the code [red] is called a shortcode and you can use it without really knowing the original code that tells the browser to display the red block. (And you don’t have to call me up to find out how to do it either!)
In my solution, I decided to create a shortcode to my liking, and that is what I will show you now in as much step-by-step detail as possible.
[hr_top] [hr_padding]Step #1: Creating a shortcode
We will start by writing a small piece of code that does some simple things:
[hr_padding]- It tells the browser to start executing the end-mark function
- It tells the browser what the end-mark is, and
- It tells the browser how to recognise your request to display the end-mark
I have already written the most basic structure of that code for you, so all you have to do is copy it and hold on to it for now. (Hover over the code and click the second icon that appears to copy it.)
[php]<!–?<span class="hiddenSpellError" pre=""–>php
function UniqueFunctionName() {
return ‘<p>fin</p>';
}
add_shortcode(‘end’, ‘UniqueFunctionName’);
?>
If you’d like, you can paste it onto a text editor like Notepad and edit certain areas. First of all, change the UniqueFunctionName , in the two places that it appears, to a name of your choice. You can call it anything you like, but avoid spaces and use under_scores instead.
Next change the text that says end to whatever you want the shortcode to be. In this case, calling [end] will get the browser to load your end-mark. You can change it to anything you like; for instance, I keep mine as [ vhb ] so I can sign off with it each time I finish an article and have the end-mark displayed. While making changes at these places, be careful not to alter inverted commas and other punctuation.
Once you are done with the changes, copy the altered code to your clipboard (i.e. Ctrl+C on your PC, or Cmd+C on your Mac.)
[hr_top] [hr_padding]Step #2: Adding the code to your theme and calling it
Our next step is to add this code to our theme. There are several ways to do this, but if you are not too good with code, it is better to make as little change as possible to the original files, so below is the method I suggest.
[hr_padding] [notice type="blue"] The best way to edit a theme is to leave the original files alone and create a child theme instead, but I will not explain that here since it is a huge topic on it own![/notice]
First go to your core files (your control panel/ftp area where your website files are stored) and create a new file; call it something like endmark.php. Of course, you can call it whatever you want, but this is the name I will be using in this tutorial.
Paste the code you copied (or the one you altered) in step #1 to the endmark.php file and save it.
Now we are going to make sure the lines of code that load your website onto a browser remember to call the new endmark.php file, else your shortcode will not work. Again, there are several ways to do this — including conditionally — but, since this code is light-weight and will hardly delay the page load time, we can afford to do it in a simple, straightforward manner.
Open your theme functions file (named functions.php) or a child-theme you have created and add the line of code that I have written below to it. If you do not know where exactly to add it, just make sure you put it before the ?> symbols at the very end.
[php]include(‘shortcodes.php’);[/php]Now, onto the next step!
[hr_top] [hr_padding]Step #3: Designing the end mark
By now I take it you have decided what your end-mark will be. Most prefer to use a small square block or an ancient, intricate glyph. I, for one, use my wordmark (see the end of this article.) If you have not, you have one more step before you start using the end mark, so start thinking!
In this step, we will make sure our end mark is displayed where we want it to. To start, open the endmark.php file.
If you have not made any alterations (except the ones stated in step #1) then, in the line 3, you should find this: <p>fin</p> .
Alongside this I also suggest you open a new post editor on your WordPress dashboard, type in your endmark shortcode (in this case, [end]) and use the preview button to see how it is working out. The chances are you see the word fin at the end of the article, but it is on a new line. The reason for this is that html does not support multiple <p> tags on the same line. (One <p> tag is already being used by your body, and using a second one moves it to a new line — after all it is the paragraph tag!)
Now there are two things you might want to do here. You can either use this and, perhaps, center the end-mark on its own line; or you can push the end-mark to the same line as the last line of the article, like you see on this website.
Let us examine the first case: you can, of course, simply edit the <p>’fin'</p> tags in the endmark.php file to
‘fin’
So our next solution is to use CSS, which does work. Simply change the line to something like <p style=”text-align:center”>fin</p> where the center attribute may be used as left also, to left-align the endmark.
The second case is if you do not want the end mark in a line of its own: edit line 3 to put the paragraph tags inside span tags like <span><p>fin</p></span> . Preview your post now and, voila, you see the end mark in the same line as the last line of the paragraph.
[hr_padding] [notice type="blue"] You might notice how I have a little space between the last full stop and the end mark on this website, but you cannot see so much space in your preview before the fin end mark we have added.The trick is to use an HTML code called the non-breaking space (i.e. white space that the browser does not collapse.) You can do this by typing in where you need a space. Do it several times to leave lots of space.
[/notice]
[hr_top]
[hr_padding]
Step #4: Making the end-mark yours!
Who wants a lousy fin as their end mark? In this final step, we will make the end mark truly yours!
You have probably decided on what you want the end mark to be be now. Perhaps a square, or a circle, or a half-circle or a weird scribble, or an elvish initial, or maybe even your own signature like I used to use before. The simplest way to use this is to create an image; keep it within 10 – 14px in height, depending on your text, and making it square is always your best bet.
Upload the image somewhere — I strongly urge you to use your own website — and copy the image location. We will call this http://mysite.com/location/of/my/image.jpg . JPG files are slimmest, and therefore the fastest to load, but you can use any common format you like.
All you have to do is replace the word fin in your endmark.php file with <img src=”http://mysite.com/location/of/my/image.jpg”> . Replace our fake image location with yours and there you have it: your own unique end mark!
If you have any questions, feel free to ask me with a comment here or simply by dropping me an email, and I will help you as best as I can. Have fun with your new end mark. [vhb]
The post How to add an end mark to your articles on WordPress appeared first on VHBelvadi.com.