Learn how to fix WP – Beginner’s Guide for WordPress

The Beginner’s Guide to the Default CSS Cheat Sheet Generated by WordPress

The Beginner’s Guide to the Default CSS Cheat Sheet Generated by WordPress

Do you need a default WordPress-generated cheat sheet for CSS?

The Beginner’s Guide to the Default CSS Cheat Sheet Generated by WordPress – In most themes, WordPress automatically adds a few CSS classes to various components. Utilize these default CSS classes to style such components in your WordPress theme.

We’ll show you the default CSS cheat sheet that WordPress generates in this post. We’ll also go through where to locate CSS classes quickly and how to create your own CSS classes if needed.

The Beginner's Guide to the Default CSS Cheat Sheet Generated by WordPress

Why Should You Learn About WordPress’s Default CSS?

Different areas of your website are given default CSS classes by WordPress, which it also develops.

The common parts of all WordPress sites may then be styled by WordPress theme developers using these CSS classes. This may include the navigation menus, sidebars, widgets, and the content area.

By adding custom CSS to your WordPress theme, you can easily change how certain parts look without having to make a whole new theme.

Default Body Class Styles

The HTML body element <body> is where a page’s layout is set up. This makes it an important part of making a WordPress theme.

In WordPress, the body section has a number of extra CSS classes that theme developers can use to style the body container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// 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 author page is displayed
.author {}
// Added when an author page is displayed. Includes author 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 child 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 author 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 can see, these classes encompass a broad range of circumstances that your CSS styles may target.

For instance, you might apply the following custom CSS if you wanted the category page for “News” to have a different background color.

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

Post Style Classes by Default

WordPress also adds dynamic classes to the post components, much like it does with the body element.

The <article> tag in your theme template often serves as this element. Nevertheless, depending on your theme, it might be any other tag. The post_class() template element is used to show the post’s CSS classes in your theme.

1
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Here are some of the most common CSS classes that the post_class() function creates:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Adds a class 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 class 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) {}

You may style blog posts and pages using post classes by comparing them to certain criteria. For example, to change the way blog posts in a certain category look, use the custom CSS code below:

1
2
3
.category-news {
background-color:#EFEFEF;
}

post class

The Default Navigation Menu classes

Your navigation menus now include CSS classes thanks to WordPress. The default classes that are automatically added to the navigation menus are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
 // Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}

Each place for the navigation menu will also get a CSS class from your WordPress theme.

If your theme gives the primary-menu class to a menu item within the header area, you may use the following CSS classes to target that menu item in your CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// container class
#header .primary-menu{}
  
// container class first unordered list
#header .primary-menu ul {}
  
//unordered list within 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 is 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 {}

Widget Classes in WordPress by Default.

Displaying non-content blocks in your WordPress theme is simple by using widgets. Usually, they appear in sidebars or certain widget-ready regions of your WordPress theme.

The following classes are added by WordPress to the legacy widgets:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.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 {}

With WordPress’s transition to block-based widget areas, you may now add a variety of blocks to your widget areas, and each one automatically creates a unique set of CSS classes.

A little later in this post, we’ll demonstrate where to obtain these CSS classes.

Default Comment Form Classes

The comment section is the heart of many WordPress websites. You may provide consumers a cleaner, more interesting experience by styling them.

The following CSS classes have been built into WordPress to help theme designers style the comment section.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/*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 { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit

WordPress Block Classes Location

CSS classes for blocks are generated dynamically by the WordPress block editor.

You need to include that exact block in a post or page in order to locate these CSS classes. To see the block in action after that, click on the Preview button.

Point your cursor at the block you just added in the preview tab, then use the right-click menu to pick the Inspect tool.

find css classes for blocks

The HTML the block produced may be seen in the developer console. The CSS classes that the block introduced may be seen here.

We are examining the CSS classes for the gallery block in the screenshot above. After that, you can customize the gallery block in your WordPress theme using these CSS classes.

WordPress: Adding Your Own Custom CSS Classes

The standard CSS classes for WordPress are now extremely extensive. But its main purpose is to give theme developers a common platform on which to build.

For some places on your website where you may not be able to locate a default CSS class to target, you might need to create custom CSS.

Similarly, sometimes you may just want to make a small change to a specific post or page without applying it to your entire theme.

There are a number of easy ways to add CSS classes to different parts of a WordPress site.

Inside the Block Editor, add custom CSS classes to a block

Adding a custom CSS class to a post or page is the easiest and fastest to do with the block editor.

To add the custom CSS class, just edit the post or page and then choose the block. Select the advanced panel under block settings to add the name of your CSS class.

block custom css

Don’t forget to click the Update button to save your changes.

Now that this block is specifically targeted for this post or page, you may use this class to apply custom CSS code.

The WordPress Navigation Menus

Additionally, you may apply unique CSS to the menu elements in your WordPress navigation. For example, if you wanted to change a menu item into a button, this technique would be useful.

By clicking on the Screen Options button in the upper right corner of the screen, you will go to the Appearance » Menus page.

You must now choose the CSS classes option and tick the box next to it.

menu css classes

Next, scroll down and select the menu item you want to apply the custom CSS class to in order to expand it.

You’ll see a field with the label “CSS classes”. Add your own CSS class right now.

menu css class

Don’t forget to click the “Save Menu” button to save your changes.

Now you can style that individual menu item differently by using this unique CSS class.

We wish you luck in locating the default CSS cheat sheet produced by WordPress. You may also be interested in reading our tutorial on using jQuery to add a smooth scroll to the top effect to a WordPress page.

The Beginner’s Guide to the Default CSS Cheat Sheet Generated by WordPress

Previous Post
Next Post