Below are scripts and CSS styles I made myself to help with various niche sites. Feel free to use and share these scripts!
How to use scripts: copy the scripts and place them into your header. You can install a plugin like Insert Headers and Footers which will allow you to paste in the scripts below.
How to use CSS: copy and paste the CSS into the Custom CSS part of your theme options.
New Window NoFollow Affiliate Links
This script makes amazon.com and amzn.to links open up in a new window and makes them nofollow. You can copy one of the links and modify it for different sites or make the rel sponsored.
<!-- Make Amazon links open in new window and nofollow -->
<script>
jQuery(document).ready(function( $ ) {
$('a[href*="amazon.com"]').attr('rel','noreferrer noopener nofollow').attr('target','_blank');
$('a[href*="amzn.to"]').attr('rel','noreferrer noopener nofollow').attr('target','_blank');
});
</script>Comment Links
This script replaces keywords in comments with links of your choice. Replace “google” with your kw choice and www.google.com with the URL of your choice. You can also add multiple lines, like “Yahoo”.
<!-- replace kws in comments with links -->
<script>
jQuery(".comment-content").html(function () {
return jQuery(this).html()
.replace(new RegExp("google", "ig"), "<a href='https://gooogle.com'>Google</a>")
.replace(new RegExp("yahoo", "ig"), "<a href='https://yahoo.com'>Yahoo</a>")
; });
</script>
<!-- END replace kws in comments with links -->Enhanced Posts Thumbs
This adds a little “pop” to your thumbnails in your blogroll or post archives for GeneratePress (you can use it for different themes once you know the right CSS class)
.post-image img {
border-radius: .2rem;
box-shadow: 0 0.2rem 0.3rem 0 rgba(0,0,0,.3);
border: none;
}
Center Align Images on Mobile
Something that is pretty annoying is when you align images left or right on desktop, they don’t look good on mobile. The following CSS makes the images centered aligned instead on mobile only.
/* mobile img alignment */
@media only screen and (max-width: 600px) {
figure.alignleft, img.alignleft, figure.alignright, img.alignright, figure img {
float:none !important;
display:block !important;
margin-left:auto !important;
margin-right:auto !important;
}
}