Για να δημιουργήσουμε μια περιοχή όπου θα εμφανίζονται πληροφορίες για τον συγγραφέα του άρθρου, καθώς και οι σύνδεσμοι του αλλά και η εικόνα του έχουμε να κάνουμε 2 πολύ απλά βήματα.

Βήμα 1

Πρώτο βήμα είναι να ανοίξουμε το αρχείο styles.css του θέματος μας. Εδώ θα προσθέσουμε τον κώδικα για το “στυλιστικό” μέρος του κουτιού με τα στοιχεία του συγγραφέα. Έτσι λοιπόν γράφουμε:

#authorarea{
background: #f0f0f0;
border: 1px solid #d2d2d2;
padding: 10px;
width:500px;
overflow:hidden;
color: #333;
}
#authorarea h3{
font-size: 18px;
color:#333;
margin:0;
padding:10px 10px 5px 10px;
}
#authorarea h3 a{
text-decoration:none;
color: #333;
font-weight: bold;
}
#authorarea img{
margin:0;
padding:10px;
float:left;
border: 1px solid #ddd;
width: 100px;
height: 100px;
}
#authorarea p{
color:#333;
margin:0;
padding:0px 10px 10px 10px;
}
#authorarea p a{
color:#333;
}
.authorinfo{
padding-left:120px;
}

Προφανώς αυτή η μορφοποίηση του στύλ είναι για το παράδειγμα μας. Θα πρέπει να “παίξετε” λίγο με τις css ιδιότητες για να το φέρετε όσο πιο κοντά γίνεται στις δικές σας ανάγκες, και να το ταιριάξετε με την ιστοσελίδα σας.

Βήμα 2

Το δεύτερο και τελευταίο βήμα είναι να ανοίξουμε το single.php , το οποίο χειρίζεται το τι θα εμφανίζεται στην σελίδα ενός άρθρου. Εκεί θα πρέπει να επιλέξουμε που θέλουμε να εμφανίζονται οι πληροφορίες του συγγραφέα. Στο GreekTuts έχουμε επιλέξει οι πληροφορίες να εμφανίζονται στο τέλος του άρθρου. Έτσι λοιπόν, μέσα στο Loop γράφουμε τον κώδικα:

<div id="authorarea">
<?php if (function_exists('get_avatar')) { echo get_avatar(  get_the_author_email(), '100' ); }?>
<div>
<h3>About <?php the_author_posts_link();  ?></h3>
<p><?php the_author_description(); ?></p>
</div>
</div>

Μια τελευταία υποσημείωση. Όπως παρατηρείτε, χρησιμοποιήσαμε την υπηρεσία Gravatar για τις εικόνες των συγγραφέων. Είναι ο πιό διαδεδομένος και εύκολος τρόπος στο WordPress για τις εικόνες των χρηστών και των συγγραφέων