How Can We Help?
Find the CSS Selector for advanced Author features
1
Enable Developer tools in your browser
Our goal is to use the web inspector. Find out if this is enabled in your browser by right clicking on any element in the page.
For more information, check out these informative links.
Developer Tools for HTML5 Programming
How to Determine Which CSS is Styling an Element
Basics of Inspect Element With Your WordPress Site (Video)
For demonstration purposes, we are using Chrome.
2
Find the author element on a single post.
The software needs to know the .css selector for the author link on a post. So open up any post in view mode and find the author name.
We use standard css selectors to find the author link. A class name is indicated by a period . preceding the element name. An ID is indicated by a hash sign # preceding an element name.
3
Right Click on the Author Name and select INSPECT
Open up the inspector by clicking on inspect after right clicking on the author name. As you can see, the html for the link is highlighted in the inspector. Links start with an html code that indicates a link. It should look something like this <a href=”https://somelink”>Author Name</a>
4
Find the parent class
The <a> link is indented under parent elements, indicating that it is a child element. This will almost always be the case.
Find the first parent element that has a class (or an id). In this case, the link is embedded in a <span> element. Here, we are grabbing the first class from the <span> parent element “posted-by”. We could just as easily use ‘vcard’ or ‘author”.
5
Enter the selector into the settings
We are going to enter
.posted-by a
as our selector. This will tell the code that the element we want to modify is a link that is inside of the element with a class of posted-by. Remember, a class-name must be preceeded by a period to let the browser know that the element is a class.
6
Test
If you did everything correctly, the code to modify the author using jQuery should work properly. In the free version of the guest author plugin, you can now have author url’s open up in another window (from single posts only). In the premium version, the guest author and multiple authors should quickly display in the post without any changes to your code. Don’t worry if it doesn’t work. Just send a link to a single post on your website to Support and we will help you.
