Default WordPress Generated CSS Cheat Sheet for Beginners

Are you in search of a default WordPress generated CSS cheat sheet?

WordPress mechanically adds some CSS classes to different elements in most themes. These default CSS classes could be used to style those elements in your WordPress theme.

In this text, we’ll show you the default WordPress generated CSS cheat sheet. We’ll also speak about how you can easily find CSS classes and how you can add custom CSS classes at any time when you wish them.

Why Learn In regards to the Default WordPress-Generated CSS?

WordPress mechanically generates and adds default CSS classes to different elements in your WordPress website.

WordPress theme developers can then use these CSS classes to style common areas of all WordPress sites. That may include the content area, sidebars, widgets, navigation menus, and more.

Knowing those CSS classes turns out to be useful when you are learning WordPress theme development or just attempting to create a baby theme for your individual website.

It also helps you quickly style certain elements in your WordPress theme by adding custom CSS without creating your individual theme.

Note: You don’t must learn CSS in an effort to change your theme styles or create a custom theme. If you happen to prefer to not learn to code, then you should utilize a drag and drop builder like SeedProd. We’ll talk more about it later within the article.

That being said, let’s take a have a look at the default WordPress generated CSS classes.

Default Body Class Styles

The body tag in HTML comprises the entire layout structure of any web page which makes it very significant in any WordPress theme design.

WordPress adds several CSS classes to the body area that theme designers can use to style the body container.

// Added when a website is using a right-to-left language e.g. Arabic, Hebrew	
.rtl {}

// Added when home page is being displayed
.home {}

// Added when blog page is being displayed
.blog {}

// Added when an Archive page is being displayed
.archive {}

// Added when a date based archive is displayed
.date {}

// Added on search pages
.search {}

// Added when pagination is enabled
.paged {}

// Added when an attachment page is displayed
.attachment {}

// Added when a 404 error page is displayed
.error404 {}

// Added when a single post is dispayed includes post ID
.single postid-(id) {}

// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}

// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}

// Added when an creator page is displayed
.creator {}

// Added when an creator page is displayed. Includes creator name. 
.author-(user_nicename) {}

// Added when a category page is displayed
.category {}

//Added when a category page is displayed. Includes category slug.
.category-(slug) {}

// Added when a tag page is displayed. 
.tag {}

// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}

// Added when a parent page is displayed. 
.page-parent {}

// Added when a baby page is displayed. Includes parent page ID. 
.page-child parent-pageid-(id) {}

// Added when a page is displayed using page template. Includes page template file name. 
.page-template page-template-(template file name) {}

// Added when search results are displayed. 
.search-results {}

// Added when search returns no results. 
.search-no-results {}

// Added when a logged in user is detected. 
.logged-in {}

// Added when a paginated page is displayed. Includes page number. 
.paged-(page number) {}

// Added when a paginated single item is displayed. Includes page number. 
.single-paged-(page number) {}

// Added when a paged page type is displayed. Includes page number. 
.page-paged-(page number) {}

// Added when a paged category page is displayed. Includes page number. 
.category-paged-(page number) {}

// Added when a paged tag page is displayed. Includes page number. 
.tag-paged-(page number) {}

//Added when a paged date based archive page is displayed. Includes page number. 
.date-paged-(page number) {}

// Added when a paged creator page is displayed. Includes page number. 
.author-paged-(page number) {}

// Added when a paaged search page is displayed. Includes page number. 
.search-paged-(page number) {}

As you’ll be able to see, these classes include a wide range of conditions that you may goal in your CSS styles.

As an illustration, when you wanted the ‘News’ category page to have a unique background color, you then can add the next custom CSS.

.category-news { 
background-color:#f7f7f7; 
}

Default Post Style Classes

Identical to with the body element, WordPress adds dynamic classes to the post elements as well.

This element is generally the

tag in your theme template. Nevertheless, it may very well be another tag depending in your theme. The post CSS classes are displayed in your theme by adding the post_class() template tag.

Here is a listing of a number of the most typical CSS classes generated by the post_class() function:

// Adds a category with ID for single items
.post-(ID) {}

// Generic post claass added for single blog posts. 
.post {}

// Generic page class added when a single page is displayed. 
.page {}

// Generic attachment class added to attachment pages.
.attachment {}

// Adds a post type class e.g. type-post
.type(post-type){}

// Adds a category for post format if theme supports posts formats. E.g. format-standard 
.format-(post-format){}

// Added when an item has a featured image
.has-post-thumbnail{}

// Added when a sticky post is displayed
.sticky {}

// Generic class to display an entry
.hentry {}

// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}

// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}

Post classes assist you to style blog posts and pages matching different conditions. As an illustration, you’ll be able to style blog posts filed in a particular category in a different way using the next custom CSS:

 .category-news { 
background-color:#EFEFEF; 
}
Post class CSS

If you happen to don’t see the CSS editor in your WordPress dashboard, then follow our tutorial on how you can fix the missing WordPress theme customizer.

Default Navigation Menu Classes

WordPress also adds CSS classes to your navigation menus. Following are the default classes added to navigation menus by default.

 // Class for Current Page
.current_page_item{}

// Class for Current Category
.current-cat{} 

// Class for another current Menu Item
.current-menu-item{} 

 // Class for a taxonomies
.menu-item-type-(taxonomy){}

// class to tell apart post types. 
.menu-item-type-(post_type){}

// Class for any custom item that you just added
.menu-item-type-custom{} 

// Class for the Home Link
.menu-item-home{} 

Your WordPress theme can even add a CSS class to every navigation menu location.

Let’s say your theme assigns primary-menu class to a menu location inside header area, you then can goal it in your CSS using the next CSS classes.

// container class
#header .primary-menu{} 
  
// container class first unordered list
#header .primary-menu ul {} 
  
//unordered list inside an unordered list
#header .primary-menu ul ul {} 
  
 // each navigation item
#header .primary-menu li {}
  
// each navigation item anchor
#header .primary-menu li a {} 
  
// unordered list if there may be drop down items
#header .primary-menu li ul {} 
  
// each drop down navigation item
#header .primary-menu li li {} 
  
// each drap down navigation item anchor
#header .primary-menu li li a {} 

For more details, see our guide on how you can style navigation menus in WordPress.

Default WordPress Widget Classes

Widgets are a straightforward strategy to display non-content blocks in your WordPress theme. They’re typically displayed in dedicated widget-ready areas or sidebars in your WordPress theme.

WordPress adds the next classes to the legacy widgets.

.widget {}
 
#searchform {}
.widget_search {}
.screen-reader-text {}
 
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
 
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
 
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
 
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
 
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
 
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
 
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {} 
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
 
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
 
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
 
.textwidget {}
.widget_text {}
.textwidget p {}

Nevertheless, as WordPress moves to block-based widget areas, you’ll be able to now add different blocks to your widget areas and every one in every of them generates CSS classes dynamically.

We’ll show you how you can find these CSS classes later in this text.

Default Comment Form Classes

Comments are the engagement hub for a lot of WordPress web sites. Styling them helps you provide users a cleaner more engaging experience.

WordPress adds the next default CSS classes to assist theme developers style comment area.

/*Comment Output*/
 
.commentlist .reply {}
.commentlist .reply a {}
 
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
 
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
 
.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
 
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
 
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
 
#cancel-comment-reply {}
#cancel-comment-reply a {}
 
/*Comment Form */
 
#respond { } 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#creator { } 
#email { } 
#url { } 
#comment 
#submit
.comment-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.form-allowed-tags { } 
.form-submit

For more details, see our guide on how you can style comments in WordPress.

Finding WordPress Block Classes

The WordPress block editor dynamically generates CSS classes for blocks.

To seek out these CSS classes, you’ll have to add that exact block to a post or page. After that, you have to click on the Preview button to see the block in motion.

Within the preview tab, take your mouse to the block that you just just added and choose Inspect tool by right-clicking.

Find CSS classes for blocks

Within the developer console, you’ll see the HTML generated by the block. From here, you’ll be able to see the CSS classes added by the block.

Within the screenshot above, we’re the Gallery block’s CSS classes. You possibly can then use these CSS classes to style the gallery block in your WordPress theme.

Adding Your Own Custom CSS Classes in WordPress

Now, default WordPress CSS classes are quite comprehensive. Nevertheless, their purpose is to mainly provide theme developers a standardized framework to construct with.

In your individual website, you could have to add custom CSS for areas where you could not have the opportunity to seek out a default CSS class to focus on.

Similarly, sometimes you could just have the desire to make a small change on a particular post or page without applying it to your entire theme.

Luckily WordPress provides you with several easy ways so as to add CSS classes in several areas.

Add Custom CSS Classes to a Block Contained in the Block Editor

If you desire to quickly add a custom CSS class to a particular post or page, then the best strategy to do this is by utilizing the block editor.

Simply edit the post or page after which select the block where you desire to add custom CSS class. Under block settings, click on the advanced panel and add the name to your CSS class.

Adding custom CSS classes to a block

Don’t forget to save lots of your changes by clicking on the Update button.

You possibly can now use this class so as to add custom CSS code that can only affect this particular block on this particular post or page.

In WordPress Navigation Menus

You may also add custom CSS to your WordPress navigation menu items. Let’s say you desire to convert a menu item into button, then this method turns out to be useful.

Simply go to the Appearance » Menus page and click on on the Screen Options button at the highest right corner of the screen.

From here, you have to check the box next to CSS classes option.

Menu CSS classes

Next, you have to scroll down and click on to expand the menu item where you desire to add the custom CSS class.

You’ll notice a field labeled CSS classes. Go ahead and add your custom CSS class here.

Adding css class to navigation menu item

Don’t forget to click on the Save Menu button to store your changes.

You possibly can now use this practice CSS class to style that exact menu item in a different way.

Bonus: Easily Design a WordPress Theme Without Writing CSS Code

Learning to style your WordPress theme with custom CSS is a highly useful skill. Nevertheless, some users may simply desire a solution to design their WordPress theme without ever writing CSS code.

For this, you’ll need SeedProd. It’s the most effective WordPress page builder tool in the marketplace that permits you to easily create custom themes without writing any code.

SeedProd Website Builder Coupon Code

SeedProd comes with able to use themes that you may use as an place to begin.

You may also create a theme from scratch by manually creating templates.

SeedProd starter themes

You possibly can then edit your custom theme using an intuitive drag and drop site constructing interface.

Simply drop blocks to your design to create your individual layouts.

SeedProd theme builder

You may also easily change any item with easy point and click on. You need to use your individual colours, background, fonts, and more.

For more details, see our step-by-step tutorial on how you can easily create a custom WordPress theme without writing any code.

We hope this text helped you discover the default WordPress generated CSS cheat sheet. You could also need to see our guide to fixing most typical WordPress errors or see our expert comparison of the most effective live chat software for small business.

If you happen to liked this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also find us on Twitter and Facebook.

Leave a Reply

Your email address will not be published.