Learn with this tutorial how to introduce a custom CSS class to a specific page in any Genesis Framework child theme using code.
WordPress offers several CSS classes to help layout some pages, for example:
- .page
- .single
- .single-portfolio
- .post-type-archive-portfolio
But, what happens if these pre-defined classes are not enough and you need something more specific?
In this case, the best solution is to create your own CSS class to apply certain styles only to one page.
Are you interested? Then, use the following code.
Snippet to insert a custom CSS class in a Genesis page
Add the following line in functions.php:
To see this and another 1097 code snippets of this website, login or subscribe here.
This snippet allows you to use the CSS “.contact “ selector to apply specific styles to the contact section. Of course, you can get the same effect in any other section.
Moreover, you also have the possibility to use the ID instead of the name to make sure that it is not affected if you change the title of the page.
To see this and another 1097 code snippets of this website, login or subscribe here.
You don’t know which ID is it? Find out here how to locate the ID of your pages.
Conclusions
Introducing a custom CSS class in a particular page can be very useful to layout it as you wish.
And now you know how to do it with a simple code snippet.
Any questions? I read you in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
