Skip to content

How to properly add images in WordPress?

WordPress is one of the most popular CMS platforms that makes creating websites simple and intuitive. One important aspect of creating an attractive website is adding images to it. However, people starting to work with WordPress often face the question: how to add images correctly? In this article, I will present various methods of adding images in WordPress - from the simplest to more advanced techniques that require the use of PHP code.

Adding images using the WordPress editor

The easiest way to add an image to a page or post in WordPress is to use the built-in editor. Just click on the "Add Media" icon, select the appropriate file from your disk and click "Insert into post". Additionally, WordPress allows you to change the size of the image, add a caption, title or link to it.

Adding images using the plugin

If you're looking for more image-related options and features, it's worth using one of the many plugins available. For example, the “NextGEN Gallery” plug-in offers advanced options for managing image galleries, including sorting, grouping, and creating slideshows.

Adding images using HTML

If you want full control over how an image is displayed on the page, you can use HTML. Just paste the appropriate code into the place where you want the image to appear. The sample code looks like this: <img src="adres_url_obrazka" alt="opis_obrazka">.

Adding images using PHP

If you are a more advanced user and want to take advantage of the power of PHP, WordPress offers several features to help you add images. One of them is the_post_thumbnail(), which allows you to display a thumbnail of the post. Here is an example code:

if ( has_post_thumbnail() ) { the_post_thumbnail(); }

Function has_post_thumbnail() checks whether the post has a thumbnail assigned, a the_post_thumbnail() displays it on the page.

Adding images using CSS

Using CSS, we can add images as backgrounds for specific page elements. Here is an example of code that adds a background image to the page header:

.header { background-image: url('image_url'); }

Remember, however, that image management is not only about adding them, but also about optimizing them. Therefore, it is worth using image optimization plugins such as “Smush” or “EWWW Image Optimizer”. They will reduce the size of files, which will speed up page loading and improve its positioning in search engines.

Check out the offer of 1500+ Premium WordPress plugins and themes!