How To Add Image Before Post Title In WordPress Site
Easy methods to Add Image Before Post Title In WordPress Site
Are you searching a perfect method to put image before post title in WordPress website? If yes then it’s really possible to add your desired image just before the post title or after the post title. But remember this tutorial is only and only for WordPress websites.
For this purpose we are going to share this tutorial and we will show you each and every steps to place image or icon before post title. After applying this method you can add or insert any image / icon before the post title. It’s really very to apply in your own WordPress site by enabling WordPress custom fields option. No any hard core coding required for this.
Just enable the hidden custom fields option in WordPress and apply image before/after post title code in WordPress. That’s it.
If you are thinking you are new or don’t have enough knowledge about WordPress coding or modification then no need to worry about it. All the steps are very simple if you are going to follow them properly. Best thing about this method is that it’s an universal method for WordPress to add an image before the post title including code. No any modification required for this. Moreover, this available code is supportable for all WordPress versions.
Important Points To Remember Before Adding Image In Post Title In WordPress Site
- By using this method you can add image in post title in WordPress – either before or after.
- This method is only and only for WordPress sites.
- Backup – As we already told you, it’s a safe and easy method for all users who really want to place image before the post title. But any wrong placement of coding may crash your WordPress site. So don’t mess-up code wrongly.
- For safe play, we recommend you to take complete backup of your WordPress site. So that you can recover it again if anything goes wrong. WordPress Backup
- Make sure you are going to use appropriate image size. it’s not too large or too small compared to the font of the title.
- Upload Image In Media Folder or get url link from any sources.
Now follow the below steps one by one to place image in post title in WordPress website.
How To Add Image In WordPress Post Title [ Before Title & After Title ]
Before going to start our tutorial it’s must to know what exactly do you want do? Well we already told you in above section is that we can insert image before post title and after post title. You have both option but you can apply only one method to add character sets in the titles of blog posts.
Just because of this we are describing both methods to add image after post title and before post title. So you can choose any method for your site.
STEP01 Download and Upload Appropriate Image
Appropriate image size is very important for this task. In short, upload any image in WordPress or can use any other external service. But main thing is that it should be available in public domain with URL.
It’s must to know that available code will not automatically resize your desired image. But you can resize it again before or after upload it. After uploading any image in WordPress, keep save the image URL and we will use it again in next step.
STEP02 Enable Custom Field Option In WordPress [ Hidden Feature Of WordPress ]
Do you know about Custom Fields option in WordPress? If no then don’t worry. Most of all users really don’t know about this hidden feature of WordPress. Main thing is that every WordPress site comes with “Custom fields option” but you have you have to enable it yourself by going to your WordPress editor and clicking on “Screen Option”.
Basically this feature allows user to store stuff unique to each post. After enabling the custom fields section in WordPress we can add image before or after the post title.
- Open WordPress editor and Click on “Screen Options” from top of the screen as shown in below screenshot.
- Click on “Screen Options” and tik mark on “Custom Fields” option to enable it.
- Done!!! Above step will create new “custom fields” section at the bottom of post editor field.
STEP03 Create New Custom Field For Post Title By Adding Image URLs
So now we have to create new custom fields to add image before WordPress post title or after post title. Basically this “custom fields” section contains two pieces of information –“Name” & “Value”. The “name” is the value we’re going to use to retrieve the image URL. Make sure that it’s the same for all future posts where you need an image in the title as well. Save your post changes.
- Open any post where you want to insert an image in the post title, scroll down the “Post editor screen” and find the “custom fields” section.
- Click on “Enter New” option and here you will see two boxes – “Name” & “Value”.
- Type “title_image” in “Name” section and paste URL of uploaded image file in “Value” section.
- Save the changes to apply the modifications.
Add Code In Function.php SectionTo Place Image Before The Post Title
Now come to the very important step of this tutorial and which is adding custom code infunction.php file. All above steps of this tutorial are very easy to learn and easy to apply for anyone. But this steps is really very important because once single wrong step may crash your site. So be careful and do it properly.
There are many ways to add custom code in function.php file. You can use plugin to add custom code in function.php WordPress or can add code in function.php file editor manually.
If you have any doubt about adding custom code in function.php please read the below link, learn more and then come here again.
Different Methods to add custom code in function.php wordpress
Steps For Adding Custom Code In functions.php or Other Theme Templates Manually
- Open wordpress dashboard >> Appearance >> Theme Editor >> Theme Functions [function.php]
- Add the below code in function.php editor proper and update the file to save the modification.
Video – How To Add Custom Code In function.php without plugin
COPY CODE : Custom Code To Add Image Before The Post Title In WordPress Site
function insert_title_image( $title, $id = null ) {
if(get_post_meta($id, 'title_image', true)) {
$img_source = get_post_meta(get_the_ID(), 'title_image', true);
$title = '<img class="icon_title" src="'. $img_source .'" />' . $title;
}
return $title;
}
add_filter( 'the_title', 'title_image', 10, 2 );
Warning: Don’t try to change anything in this custom code.
Above custom code will take “title_image” value and adds it before wordpress post title
Add Code In Function.php Section To Place Image After The Post Title
Above code will help you to insert photo in front of post title in WordPress but in case if you want to add the same image after the post title then modify the above code with below code line and add it into function.php file or put the direct code in function.php file
COPY CODE : Code To Add Image After Post Title
Replace the below code line with new code to show image after the post title and save function.php file.
$title = ‘<img class=”icon_title” src=”‘. $img_source .'” />’ . $title;
Into this line:
$title = $title. ‘<img class=”icon_title” src=”‘. $img_source .'” />’;
Alternatively you can use the below direct code to add image after the WordPress post title.
function insert_title_image( $title, $id = null ) {
if(get_post_meta($id, 'title_image', true)) {
$img_source = get_post_meta(get_the_ID(), 'title_image', true);
$title = $title. ‘<img class=”icon_title” src=”‘. $img_source .'” />’;
}
return $title;
}
add_filter( 'the_title', 'title_image', 10, 2 );
These above modified code will display image after post title as shown below.
Add Same Default Image Before Post Title For All Post
If you want to use same icon to add image before the post title for all posts then use the below code.
function insert_title_image( $title, $id = null ) {
if(get_post_meta(get_the_ID(), ' title_image _url', true) {
$title = '<img class="icon_title" src="<?php echo get_post_meta(get_the_ID(), ' title_image, true);?>" />' . $title;
} else {
$title = '<img class="icon_title" src="[URL of Default Image]" />' . $title;
}
return $title;
}
add_filter( 'the_title', ' title_image, 10, 2 );
Check above code and replace the [URL of Default Image] in bold with the URL of the default image you want to prepend to every post title.
Add Same Default Image After Post Title For All Post
function insert_title_image( $title, $id = null ) {
if(get_post_meta(get_the_ID(), 'title_image _url', true) {
$title = '<img class="icon_title" src="<?php echo get_post_meta(get_the_ID(), 'title_image _url', true);?>" />' . $title;
} else {
$title = $title. ‘<img class=”icon_title” src=”[URL of Default Image]‘. $img_source .'” />’;
}
return $title;
}
add_filter( 'the_title', 'insert_title_image ', 10, 2 );
Use the above code if you want to keep default image to use after the post title for all post titles of your site.
Must Read : All the above custom codes to add image before or after in post title are working and tested. But we will not take any responsibility of any user. So do it on your own responsibility. Don’t forget to take backup of the device before applying any modification in function.php file.
Here in this tutorial we tried our best to describe all the steps with all necessary screenshots and videos. Just follow the tutorial as it is as shown above and insert image or icon before or after post title in WordPress site.
