How Can We Help?

Find the CSS Selector for advanced Author features

You are here:
< Back



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.



Click on the image to view


2
Find the author element on a single post.





Click on the image to view

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.

Class and ID Selectors


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>



Click on the image to view


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”.



Click on the image to view


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.