You're browsing the category: Tutorials

Tutorials and snippets related to programming: Wordpress, HTML, CSS, jQuery, you name it.

Tutorials

WordPress: Custom Signature on Posts

Do you ever read blogs that have a custom image or signature on the bottom of the posts? Well, if you have a WordPress blog and want to add your own custom signature on your posts, it’s really easy to do!

Edit your theme’s functions.php file

Like I wrote on the code comment, you can replace the <img> tag with any content you want to add as your signature (custom text, quote, etc). Don’t forget to customize the styling (alignment and other properties) of the signature using the .signature CSS class.

That’s it! If you have any comments or questions, make sure to leave a comment!

Tutorials

PHP: Random Background Image

 

I’m working on a website for a local wrestling company and one thing that was requested is having alternating backgrounds featuring different wrestlers. There are many tutorials that show you how to do this (there are different ways to do this too) but I’m going to share what I use to get this done. I find the code to be very simple and straight-forward.

Step 1: Code above the DOCTYPE

You need to set up an array with the background filenames. These would be the images you want to randomize. This code is added it above the doctype declaration on your site.

Note: If you’re using HTML5, the following code would be written above the <!DOCTYPE html>

If you’re using HTML 4.01 (which contains three different declarations: Strict, Transitional and Frameset), the code would be written above the <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (I’m using the XHTML 1.0 Transitional doctype declaration for this example)

Step 2: CSS in <head>

To display the random background on your page, you will have to add the following code inside the tag of your file. This will create a ‘class’ to be added to the tag later. Feel free to add any properties you may need for the background (background-repeat, background-attachment, etc.)

Step 3: CSS Class in <body>

All that’s left to do is add the CSS class randomBackground to the tag of our file, something like this:

And we’re done! You should be able to see random backgrounds every time you refresh the page. Click the button below to see a demo.

Step 4: See it in action!

DEMO