Author Profile Implementation Guide
Complete instructions for setting up the Author Profile on your WordPress site
Introduction
This guide will help you implement the Author Profile code on your WordPress website. The profile automatically detects the current post's author and displays their information, social links, posts, and tags.
Step-by-Step Implementation
1 Paste the Code
Copy the entire HTML code provided and paste it where you want the author profile to appear:
- In a Post/Page: Use a Custom HTML block in the WordPress editor
- In a Theme Template: Paste directly into your theme files (e.g., single.php, author.php)
- In a Widget: Use a Custom HTML widget
2 Set Up Author Information
To display author information correctly, follow these steps:
- Log in to your WordPress admin panel
- Go to Users → All Users
- Click on the author you want to edit
- Fill in the following fields:
- Biographical Info: Add the author's bio and social links (see example below)
- Website: Add the author's website URL (optional)
- Profile Picture: Make sure the author has a Gravatar profile picture set up
3 Format Author Bio with Social Links
For the social links to appear correctly, format the biographical info as follows:
John Doe is an experienced writer with over 10 years in the industry. He specializes in technology and education topics.
https://t.me/johndoe
https://instagram.com/johndoe
https://facebook.com/johndoe
https://x.com/johndoe
https://youtube.com/johndoe
https://wa.me/1234567890
https://pinterest.com/johndoe
https://threads.net/johndoe
Author bio text goes here.
<!-- SOCIAL LINKS -->
https://t.me/username
https://instagram.com/username
https://facebook.com/username
https://x.com/username
https://youtube.com/username
https://wa.me/phonenumber
https://pinterest.com/username
https://threads.net/username
Customization Options
Changing Colors
To change the color scheme, modify these CSS variables in the style section:
/* Primary colors */
background: linear-gradient(135deg, #0d3b1e, #1e6b3a); /* Body background */
background: #0d3b1e; /* Profile background */
color: #ffcc00; /* Accent color (yellow) */
/* Social media colors are defined individually for each platform */
Modifying Layout
The profile uses CSS Grid and Flexbox for layout. You can adjust the grid template in the .profile-content section:
.profile-content {
display: grid;
grid-template-columns: 1fr 1fr; /* Two equal columns */
gap: 40px; /* Space between columns */
}
Changing Social Media Icons
To add or modify social media platforms, update the detectPlatformFromURL() function in the JavaScript section.
Troubleshooting
Profile Not Loading
- Check that your WordPress REST API is accessible at:
https://yoursite.com/wp-json/wp/v2/ - Verify that the author ID exists and has published posts
- Check browser console for JavaScript errors
Social Icons Not Appearing
- Ensure social links are properly formatted in the biographical info
- Check that Font Awesome is loading correctly
- Verify that the URLs use HTTPS protocol
Author Image Not Displaying
- Make sure the author has a Gravatar account with a profile picture
- Check that the Gravatar email in WordPress matches the Gravatar account
परिचय
यह गाइड आपको अपनी वर्डप्रेस वेबसाइट पर लेखक प्रोफाइल कोड को लागू करने में मदद करेगी। यह प्रोफाइल स्वचालित रूप से वर्तमान पोस्ट के लेखक का पता लगाती है और उनकी जानकारी, सोशल लिंक, पोस्ट और टैग प्रदर्शित करती है।
चरण-दर-चरण कार्यान्वयन
1 कोड पेस्ट करें
प्रदान किए गए संपूर्ण HTML कोड को कॉपी करें और उसे वहां पेस्ट करें जहां आप लेखक प्रोफाइल दिखाना चाहते हैं:
- पोस्ट/पेज में: वर्डप्रेस संपादक में कस्टम HTML ब्लॉक का उपयोग करें
- थीम टेम्पलेट में: सीधे अपनी थीम फाइलों में पेस्ट करें (जैसे single.php, author.php)
- विजेट में: कस्टम HTML विजेट का उपयोग करें
2 लेखक जानकारी सेट करें
लेखक जानकारी को सही ढंग से प्रदर्शित करने के लिए, इन चरणों का पालन करें:
- अपने वर्डप्रेस एडमिन पैनल में लॉग इन करें
- Users → All Users पर जाएं
- उस लेखक पर क्लिक करें जिसे आप संपादित करना चाहते हैं
- निम्नलिखित फ़ील्ड भरें:
- Biographical Info: लेखक की जीवनी और सोशल लिंक जोड़ें (नीचे उदाहरण देखें)
- Website: लेखक की वेबसाइट URL जोड़ें (वैकल्पिक)
- Profile Picture: सुनिश्चित करें कि लेखक के पास Gravatar प्रोफाइल चित्र सेट अप है
3 सोशल लिंक के साथ लेखक जीवनी फॉर्मेट करें
सोशल लिंक को सही ढंग से प्रदर्शित करने के लिए, जीवनी की जानकारी को निम्नानुसार फॉर्मेट करें:
जॉन डो 10 वर्षों के अनुभव वाले एक अनुभवी लेखक हैं। वह प्रौद्योगिकी और शिक्षा विषयों में माहिर हैं।
https://t.me/johndoe
https://instagram.com/johndoe
https://facebook.com/johndoe
https://x.com/johndoe
https://youtube.com/johndoe
https://wa.me/1234567890
https://pinterest.com/johndoe
https://threads.net/johndoe
लेखक की जीवनी यहाँ लिखें।
<!-- SOCIAL LINKS -->
https://t.me/username
https://instagram.com/username
https://facebook.com/username
https://x.com/username
https://youtube.com/username
https://wa.me/phonenumber
https://pinterest.com/username
https://threads.net/username
अनुकूलन विकल्प
रंग बदलना
रंग योजना बदलने के लिए, स्टाइल सेक्शन में इन CSS वेरिएबल्स को संशोधित करें:
/* प्राथमिक रंग */
background: linear-gradient(135deg, #0d3b1e, #1e6b3a); /* बॉडी बैकग्राउंड */
background: #0d3b1e; /* प्रोफाइल बैकग्राउंड */
color: #ffcc00; /* एक्सेंट रंग (पीला) */
/* सोशल मीडिया रंग प्रत्येक प्लेटफॉर्म के लिए अलग से परिभाषित हैं */
लेआउट संशोधित करना
प्रोफाइल लेआउट के लिए CSS Grid और Flexbox का उपयोग करती है। आप .profile-content सेक्शन में ग्रिड टेम्पलेट को समायोजित कर सकते हैं:
.profile-content {
display: grid;
grid-template-columns: 1fr 1fr; /* दो समान कॉलम */
gap: 40px; /* कॉलम के बीच की जगह */
}
सोशल मीडिया आइकन बदलना
सोशल मीडिया प्लेटफॉर्म जोड़ने या संशोधित करने के लिए, JavaScript सेक्शन में detectPlatformFromURL() फ़ंक्शन को अपडेट करें।
समस्या निवारण
प्रोफाइल लोड नहीं हो रही
- जांचें कि आपकी वर्डप्रेस REST API इस पते पर एक्सेसिबल है:
https://yoursite.com/wp-json/wp/v2/ - पुष्टि करें कि लेखक ID मौजूद है और उसने पोस्ट प्रकाशित की हैं
- JavaScript त्रुटियों के लिए ब्राउज़र कंसोल जांचें
सोशल आइकन दिखाई नहीं दे रहे
- सुनिश्चित करें कि सोशल लिंक जीवनी की जानकारी में ठीक से फॉर्मेट किए गए हैं
- जांचें कि Font Awesome सही ढंग से लोड हो रहा है
- पुष्टि करें कि URL HTTPS प्रोटोकॉल का उपयोग करते हैं
लेखक छवि प्रदर्शित नहीं हो रही
- सुनिश्चित करें कि लेखक के पास Gravatar खाता है जिसमें प्रोफाइल चित्र है
- जांचें कि वर्डप्रेस में Gravatar ईमेल Gravatar खाते से मेल खाता है
