How to Add a Custom Watermark to WordPress Images Without Plugins

Images are a powerful means of communication on your website, and a strategically crafted watermark not only elevates your brand but also fortifies the protection of your valuable content. In this comprehensive tutorial, we’ll walk you through the process of establishing a personalized and secure watermark system for your WordPress media, all without relying on plugins. Whether you’re an aspiring website owner or an experienced developer, this step-by-step guide empowers you to unlock the full potential of your site’s visuals, ensuring your original images consistently reflect your brand identity.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Prepare Watermark Image

Begin by creating a PNG image file for your watermark. This can be your logo or any symbol representing your brand. Ensure it has a transparent background for seamless integration.

Upload Watermark Image

Upload your watermark image to the WordPress media library. Take note of the attachment ID, found in the URL when editing the image in the media library (e.g., wp-admin/post.php?post=123&action=edit where 123 is the attachment ID).

Modify Child Theme’s functions.php File

Begin by opening your WordPress child theme’s functions.php file. This file acts as the nerve center for tailoring your theme’s functionality. You have the option to edit it directly within the Theme Editor in your WordPress dashboard. For more advanced customization, utilize an external code editor in conjunction with FTP (File Transfer Protocol). Simply insert the provided code snippet at the end of the functions.php file to implement the desired functionality.

function add_watermark_to_image( $attachment_id ) {
	$image_sizes             = get_intermediate_image_sizes();
	$watermark_attachment_id = YOUR_ATTACHMENT_ID; // Replace with your watermark attachment ID

	foreach ( $image_sizes as $size ) {
		$image_path     = get_attached_file( $attachment_id );
		$watermark_path = get_attached_file( $watermark_attachment_id );

		if ( $image_path && file_exists( $image_path ) && $watermark_path && file_exists( $watermark_path ) ) {
			$image     = imagecreatefromstring( file_get_contents( $image_path ) );
			$watermark = imagecreatefrompng( $watermark_path );

			if ( $image && $watermark ) {
				list( $image_width, $image_height )         = getimagesize( $image_path );
				list( $watermark_width, $watermark_height ) = getimagesize( $watermark_path );

				// Set the position of the watermark (bottom right)
				$dest_x = $image_width - $watermark_width;
				$dest_y = $image_height - $watermark_height;

				imagecopy( $image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height );

				// Save the watermarked image
				imagepng( $image, $image_path );

				imagedestroy( $image );
				imagedestroy( $watermark );
			} else {
				error_log( 'Image or watermark creation failed for size: ' . $size );
			}
		} else {
			error_log( 'Image or watermark not found for size: ' . $size );
		}
	}
}

add_action( 'add_attachment', 'add_watermark_to_image' );

Code language: PHP (php)

Replace YOUR_ATTACHMENT_ID with the actual attachment ID from Step 2.

Explanation:

  • add_watermark_to_image: This function is hooked into the add_attachment action, which is triggered when new attachments are added. The function overlays the watermark dynamically.
  • $image_path, $watermark_path: Retrieve the paths of the main image and the watermark image.
  • $image, $watermark: Create image resources from the watermark and main images.
  • $dest_x, $dest_y: Calculate the watermark position for the bottom-right placement.
  • imagecopy: Merge the watermark onto the main image.
  • imagedestroy: Free up memory by destroying the image resources.

Customize Watermark Position

You can change the position of the watermark by modifying the $dest_x and $dest_y variables:

Top-Left:

$dest_x = 10; // Set a fixed distance from the left
$dest_y = 10; // Set a fixed distance from the top
Code language: PHP (php)

Top-Center:

$dest_x = ($image_width - $watermark_width) / 2; // Center horizontally
$dest_y = 10; // Set a fixed distance from the top
Code language: PHP (php)

Top-Right:

$dest_x = $image_width - $watermark_width - 10; // Set a fixed distance from the right
$dest_y = 10; // Set a fixed distance from the top
Code language: PHP (php)

Center-Left:

$dest_x = 10; // Set a fixed distance from the left
$dest_y = ($image_height - $watermark_height) / 2; // Center vertically
Code language: PHP (php)

Center:

$dest_x = ($image_width - $watermark_width) / 2; // Center horizontally
$dest_y = ($image_height - $watermark_height) / 2; // Center vertically
Code language: PHP (php)

Center-Right:

$dest_x = $image_width - $watermark_width - 10; // Set a fixed distance from the right
$dest_y = ($image_height - $watermark_height) / 2; // Center vertically
Code language: PHP (php)

Bottom-Left:

$dest_x = 10; // Set a fixed distance from the left
$dest_y = $image_height - $watermark_height - 10; // Set a fixed distance from the bottom
Code language: PHP (php)

Bottom-Center:

$dest_x = ($image_width - $watermark_width) / 2; // Center horizontally
$dest_y = $image_height - $watermark_height - 10; // Set a fixed distance from the bottom
Code language: PHP (php)

Bottom-Right:

$dest_x = $image_width - $watermark_width - 10; // Set a fixed distance from the right
$dest_y = $image_height - $watermark_height - 10; // Set a fixed distance from the bottom
Code language: PHP (php)

Feel free to choose the placement that best fits your design preferences by adjusting the values of $dest_x and $dest_y accordingly.

Verification and Implementation

To confirm the functionality of the watermark code snippet, upload a new image to your WordPress media library. During the upload process, the watermark will be dynamically applied. Please be patient, as the watermark addition might slightly extend the upload time. Once the upload is complete, visit your website or check the media library to view the watermarked version of the newly uploaded image. If successful, the image should now display the applied watermark, confirming the proper operation of the code snippet.

That’s it! You’ve successfully implemented a dynamic and secure watermark system for your WordPress media! This personalized touch not only enhances your brand but also protects your valuable content. As your images display with the watermark positioned according to your preference, you can be confident in maintaining a consistent visual identity across your website.

Take a moment to explore different watermark positions by adjusting the values in the code. Whether you prefer the bottom right, bottom left, top right, top left, or centered watermark, the flexibility is now in your hands.

Leave your feedback and help us improve šŸ¶

We hope you found this article helpful! If you have any questions, feedback, or spot any errors, please let us know in the comments. Your input is valuable and helps us improve. If you liked this article, please consider sharing it with others. And if you really enjoyed it, you can show your support by buying us a cup of coffee ā˜•ļø or donating via PayPal šŸ’°.

More free knowledge, because why not?

Your thoughts matter, leave a reply šŸ’¬

Your email address will not be published. Required fields are marked *