Creating a custom HTML / CSS Link Box to suggest new articles to our readers. There are times when adding another plugin to a WordPress site that already contains so many starts to become a dilemma ... to do it or not to do it? Especially if you think that this plugin does nothing but create a link to a different article in your blog (internal links like: read this other article too ... etc.) So, in these cases why not create a small CSS snippet with a class that establishes the look of the link we want to create, perhaps a sort of CTA button that allows us to highlight the page we are recommending readers to visit . Yes, if you are among those who have more fun doing a little bit of their hand instead of having something ready then this article is for you. Here we are going to see how to create the script in CSS and where to place it in such a way as to simply refer to it with a class name when we add it to our blog post. First let's start with the CSS This snippet must be added to your theme customizer, in the last tab at the bottom: custom CSS (see image 1). So once logged into the WordPress dashboard we follow the link: Appearance -> Customizer -> Additional CSS The custom CSS function in the customizer In this box you may already have other custom CSS or if you find it empty it means that you have never made customizations to your template yet. The new rules that you write here will be kept even when you update the theme, so let's say that it is the best place to put them because you do not risk deleting them once the various updates have been made. Without going to write a lesson to explain what all the items in the script do, (pretty simple and self explanatory) here is what I have prepared for this article, as you can see we have created a button with a few classes to make it more visible and "captivating". The borders are dashed and have a hint of a shadow, they will have a slight action on hover with changing color and shifting shape too. From the HTML script that we are going to use to launch the box link you will notice that the entire div is a link. This is OK for small text but can become pretty messy if you have mixed and more importantly more content. so I suggest to use this method only in cases such as this one. Notice that before the start and at the end of the snippet we have added comments which will be useful for two main reasons: They will help anyone other than you to understand what and where to put their hands, in case there is a need to make changes. They will also help you to discern what and where, in case a multitude of customizations are added over time. It will seem ridiculous to you that you do not remember something you have done yourself ... but if you are among those who do it often, not only for your sites, after months or even years, I can guarantee you that it is mathematically impossible to remember them all. This is why comments, in any writing, whether it be CSS / JavaScript or even HTML, are very important. They are a real treasure map. Also very important are the two comments that indicate where a particular code snippet begins and ends. This is because, in the case of more complex writings, and therefore very long, it solves the problem of reading all the classes / IDs, to understand where the end is. Add the CSS code for your custom link box [caption id="attachment_3927" align="aligncenter" width="1280"] Image 1 - Adding the CSS on Customizer[/caption] Here is the CSS code /* Custom CTA starts here */ .boxlink { box-shadow:2px 2px 4px grey; border: 2px dashed #47C19C; text-shadow: 1px 1px #E3D5D5; padding: 10px; text-align: center; font-size: larger; } .boxlink:hover { box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 20px 0 rgba(0, 0, 0, 0.12); cursor: pointer; background-color: #A5E6EB; /* For browsers that do not support gradients */ background-image: linear-gradient(#DBFCF2, #ECFDF8); color: #47C19C; border: 2px dashed #919191; font-size: 110%; } /* // Custom CTA ends here */ Add the HTML code anywhere in the article to display the custom HTML / CSS Link Box To do so, just switch the WP editor (I am actually using the classic one not the block editor) in to the text version not the WYSIWYG view. Now paste the following code: <a target="_blank" href="https://your-article-url-goes-here.com" rel="noopener"> <div class="boxlink"> Read also: This Great Article </div> </a> You have done it! now save it and test. Please note that you can change the color scheme from the customizer code and assign some colors that are more in line with your theme. You can actually do more than just that and go ahead and fully customize it as you like it by changing the borders, adding a different depth to the shadows and so on. Creating a custom HTML / CSS Link Box: In conclusion Here is the final output in action: Read also: This Great Article Great, I hope you enjoy making your own snippets as much as I do. You have probably spent a good 20 minutes of fun coding your CSS Link Box. Le't don't forget that you have also avoided installing yet a new plugin to do just that, and by doing so, you have saved some precious resources of your server, hence probably also minimised the loading time of your web page.
