To add custom social media icons to your WordPress header without using a plugin, you can modify your theme’s PHP and CSS files. However, this will require some coding knowledge and may not be appropriate for beginners. If you’re comfortable with coding, follow these steps.
Before making any changes, always ensure to back up your files to prevent accidental loss of data.
- Choose or create your icons: You’ll need to have your social media icons ready. They could be SVG, PNG, or JPG files, as long as they’re suitable for web use. SVG is recommended for scalability without loss of quality.
- Upload the icons to your WordPress media library: Go to your WordPress dashboard and navigate to Media > Add New and upload your icons.
- Get the URLs of the images: After uploading, click on each image, and you will see a URL field on the right-hand side of the media uploader. Copy these URLs.
- Locate your theme’s header file: Navigate to Appearance > Theme Editor. In the right-hand side file list, find the header.php file. If you want to add the icons to a different part of your website, you would select a different file.
- Edit your header file: Within header.php (or your chosen file), find the spot where you want to place your icons. Add this code for each icon:
<a href="YOUR_SOCIAL_MEDIA_PROFILE_LINK" target="_blank">
<img src="URL_OF_YOUR_UPLOADED_ICON" alt="SOCIAL_MEDIA_NAME" width="32" height="32">
</a>
Replace YOUR_SOCIAL_MEDIA_PROFILE_LINK
with your actual social media profile link, URL_OF_YOUR_UPLOADED_ICON
with the actual URL of your icon image, and SOCIAL_MEDIA_NAME
with the name of the social media platform.
- Styling your icons: If you need to apply some custom CSS styling to these icons, you can add classes to your image tags. For instance:
<a href="YOUR_SOCIAL_MEDIA_PROFILE_LINK" target="_blank">
<img src="URL_OF_YOUR_UPLOADED_ICON" alt="SOCIAL_MEDIA_NAME" class="my-social-icon" width="32" height="32">
</a>
Then navigate to Appearance > Customize > Additional CSS, and add your custom styles:
.my-social-icon {
margin-right: 10px;
/* Other CSS properties */
}
- Save your changes: Click the “Update File” button to save your changes when you are finished.
Remember, these changes may be overwritten if you update your theme. It’s recommended to use a child theme to prevent losing your modifications. If you’re uncomfortable with this method, consider using a WordPress plugin for social media icons or hiring a developer.