{"id":118134,"date":"2013-07-10T11:30:10","date_gmt":"2013-07-10T15:30:10","guid":{"rendered":"http:\/\/wpmu.org\/?p=118134"},"modified":"2022-02-09T17:35:55","modified_gmt":"2022-02-09T17:35:55","slug":"how-to-create-custom-bullet-points-in-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-create-custom-bullet-points-in-wordpress\/","title":{"rendered":"How to Create Custom Bullet Points in WordPress"},"content":{"rendered":"<p>Bullet points are an especially effective way to communicate certain information on the web. Of course they can very good in print too, but as we all know, reading on the web is different. People scan more. They expect a more graphic presentation of text. And their eyes get tired easier.<\/p>\n<figure id=\"attachment_118185\" class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-118185\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/bite-the-bullet.jpg\" alt=\"Bit the bullet -- get into your CSS and get your bullet points up to speed. \" width=\"796\" height=\"400\" \/><figcaption class=\"wp-caption-text\">Bite the bullet &#8212; get into your CSS and get your bullet points up to speed.<\/figcaption><\/figure>\n<p>If we were to make a quick list of the benefits of bullet points, we might say they \u2026<\/p>\n<ul>\n<li>Make for easy reading<\/li>\n<li>Break up copy<\/li>\n<li>Draw the eye of scanners<\/li>\n<li>Emphasize the unifying idea between points<\/li>\n<li>Communicate ideas quickly<\/li>\n<\/ul>\n<p>And so bullet points are important, especially in text heavy posts. Getting the styling of your bullet points right is also important. Some may scoff at that, but any writer who cares about his\/her words knows that when a bulleted list doesn\u2019t look right, it seems to take away from the content itself.<\/p>\n<p>And so below we\u2019re going to go over some basic principles you can use to get your bulleted lists looking the way you want them to.<\/p>\n<p>Here is what we&#8217;ll cover in this article:<\/p>\n<ul>\n<li><a href=\"#create-child-theme\">Create a Child Theme<\/a><\/li>\n<li><a href=\"#the-theme-bullet-points-style\">The Theme Bullet Points Style<\/a><\/li>\n<li><a href=\"#class-name-of-your-content\">Finding the Class Name of Your Content<\/a><\/li>\n<li><a href=\"#html-code-for-bullet-points\">HTML Code for Bullet Points<\/a><\/li>\n<li><a href=\"#styling-bullet-points-with-css\">Styling Bullet Points with CSS<\/a><\/li>\n<\/ul>\n<h2 id=\"create-child-theme\">Create a Child Theme<\/h2>\n<figure id=\"attachment_118177\" class=\"wp-caption alignright\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-2-3 wp-image-118177\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/happy-baby-312x201.jpg\" alt=\"Using a child theme keeps you happy and cool.\" width=\"312\" height=\"201\" \/><figcaption class=\"wp-caption-text\">Using a child theme keeps you happy and cool.<\/figcaption><\/figure>\n<p>When making changes to your theme, it\u2019s best to use a child theme. This way, if your theme gets updated, you don&#8217;t lose your changes. And so that\u2019s what we\u2019re going to be using for this tutorial (a child theme of the default Twenty Twelve WordPress theme). You can learn how to <a href=\"https:\/\/wpmudev.com\/blog\/how-to-create-a-wordpress-child-theme-in-3-steps\/\" target=\"_blank\">make a child theme here<\/a>.<\/p>\n<p>Note: Some more advanced themes might already have a special stylesheet incorporated into the theme for your customizations. If making a child theme doesn\u2019t seem to work for you, you might seek out a solution online or with the theme author. If you\u2019re having problems making a child theme with your particular theme, then others are probably having the same problems.<\/p>\n<h2 id=\"the-theme-bullet-points-style\">The Theme Bullet Points Style<\/h2>\n<p>The style of your bullet points is controlled by your theme. And so in order to change that style, you need to know how your theme references them in the stylesheet.<\/p>\n<p>The style for your bullet points will be a subsection of the style of your main content. Many themes will probably classify the overall content as \u201centry-content.\u201d In other words, they will create a \u201cclass\u201d called \u201centry-content,\u201d and then reference that name (entry-content) in the stylesheet.<\/p>\n<p>But there\u2019s also a chance that your theme may give it a different name, and so the first thing you should do is find out what \u201cclass\u201d\u00a0 your theme assigns to the content on a post.<\/p>\n<h2 id=\"class-name-of-your-content\">Finding the Class Name of Your Content<\/h2>\n<p>In order to find the class name for your content, you can just go to a post that you\u2019ve already published, and then look at the code for that page. You can do this by right-clicking on the page and then clicking \u201cView Page Source\u201d or \u201cView source,\u201d etc.<\/p>\n<p>Next, pick the first few words from your post and search the code for those words. When you find them, you should also see some code not far above them that will tell you what class your theme has given to the content on the page.<\/p>\n<p>I did this in the default Twenty Twelve theme, and I found the class to be \u201centry-content.\u201d As mentioned, yours might be the same, but it might also be different. Look for the \u201cclass\u201d tag inside of a div near the top of your content.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-ratio-large wp-image-118138\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/class-entry-content-700x349.jpg\" alt=\"class-entry-content\" width=\"700\" height=\"349\" \/><\/div>\n<\/div>\n<p>*Note: There\u2019s a chance that your theme is a lot more complex than the above, and you may find several classes. If so, just keep trying each one until you find the one that works for you.<\/p>\n<h2 id=\"html-code-for-bullet-points\">HTML Code for Bullet Points<\/h2>\n<p>A list of bullet points in WordPress is going to be created by using two different tags.<\/p>\n<p>First there\u2019s the &lt;ul&gt; tag. \u201cUL\u201d stands for \u201cunordered list,\u201d as opposed to &lt;ol&gt; &#8212; which stands for \u201cordered list.\u201d An unordered list will not be numbered (it will have bullet points). An ordered list is a numbered list.<\/p>\n<p>The next tag in a bullet list is the &lt;li&gt; tag. This stands for \u201clist item.\u201d<\/p>\n<p>If you make a bullet list in your WordPress editor and then switch to the \u201cText\u201d view, you can see these two tags in action.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-ratio-large wp-image-118139\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/html-tags-700x389.jpg\" alt=\"html-tags\" width=\"700\" height=\"389\" \/><\/div>\n<div class=\"cgrid-col cgrid-col-span-full\"><\/div>\n<\/div>\n<h2 id=\"styling-bullet-points-with-css\">Styling Bullet Points with CSS<\/h2>\n<p>OK, now on to the fun part \u2013 actually customizing your bullet lists. If you haven\u2019t yet, remember to activate your child theme. Now you\u2019ll need to go to the stylesheet in your child theme. (Appearance &gt; Editor &gt; Stylesheet \u2013 style.css)<\/p>\n<p>Remember that in my theme the class for my content was named \u201centry-content.\u201d And so that\u2019s what I will be using in the examples below. If you found that your class was named something else, just substitute that in.<\/p>\n<p>To begin with, let\u2019s take a look at the default style for bullet lists in the Twenty Twelve theme. From there, we\u2019ll gradually change things up.<\/p>\n<p>Here\u2019s the default look.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118140\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/default.jpg\" alt=\"default\" width=\"700\" height=\"302\" \/><\/div>\n<div class=\"cgrid-col cgrid-col-span-full\"><\/div>\n<\/div>\n<h3><span style=\"text-decoration: underline;\">Changing the Font<\/span><\/h3>\n<p>We\u2019ll start with something really simple. This will let you get an idea of how things get changed. We\u2019re simply going to make the font bold with the following CSS.<\/p>\n<pre>.entry-content ul li{\r\n font-weight: bold;\r\n }<\/pre>\n<p>Here\u2019s the result.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118144\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/bold.jpg\" alt=\"bold\" width=\"700\" height=\"302\" \/><\/div>\n<\/div>\n<p>And for this first one, I\u2019ll just show you what the stylesheet in my newly create child theme looks like.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118145\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/stylesheet.jpg\" alt=\"stylesheet\" width=\"700\" height=\"563\" \/><\/div>\n<\/div>\n<p>Of course you can change the color too. As a dramatic example, we\u2019ll change the list to bright green by adding &#8220;color: #00FF00;&#8221;<\/p>\n<pre>.entry-content ul li{\r\nfont-weight: bold;\r\ncolor: #00FF00;\r\n}<\/pre>\n<p>And here\u2019s how it looks.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118146\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/green-bullets.jpg\" alt=\"green-bullets\" width=\"700\" height=\"302\" \/><\/div>\n<div class=\"cgrid-col cgrid-col-span-full\"><\/div>\n<\/div>\n<h3><span style=\"text-decoration: underline;\">Add Different Styles<\/span><\/h3>\n<p>OK, now we\u2019re going start change the bullets themselves. We\u2019re going to change the filled in circles to empty circles by adding this bit of CSS code: list-style:circle;<\/p>\n<p>My CSS code now looks like this:<\/p>\n<pre>.entry-content ul li{\r\n font-weight: bold;\r\n list-style:circle;\r\n }<\/pre>\n<p>And this is the result.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118147\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/empty-circles.jpg\" alt=\"empty-circles\" width=\"700\" height=\"302\" \/><\/div>\n<\/div>\n<p>You can also change those empty circles to square by changing<\/p>\n<pre>list-style:circle;<\/pre>\n<p>to<\/p>\n<pre>list-style:square;<\/pre>\n<p>And here\u2019s the result.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118148\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/squares.jpg\" alt=\"squares\" width=\"700\" height=\"302\" \/><\/div>\n<\/div>\n<p>There is also the \u201cdisc\u201d style, which is a filled in circle.<\/p>\n<pre>.entry-content ul li {\r\nfont-weight: bold;\r\nlist-style: disc;\r\n}<\/pre>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><\/div>\n<div class=\"cgrid-col cgrid-col-span-full\">And here&#8217;s the result:<\/div>\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118149\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/disc.jpg\" alt=\"disc\" width=\"700\" height=\"302\" \/><\/div>\n<\/div>\n<p>There are other values that you can use with the \u201clist-style\u201d property, many of which apply to using number (ordered lists). You can find <a href=\"http:\/\/www.w3schools.com\/cssref\/pr_list-style-type.asp\" target=\"_blank\">more info on those here<\/a>.<\/p>\n<h3><span style=\"text-decoration: underline;\">Using Images as Bullet Points<\/span><\/h3>\n<p>You can also add images as your bullet points. The way to do that is to add the following line of CSS code:<\/p>\n<pre>list-style-image:url(url-of-your-image);<\/pre>\n<p>So, for example, if keeping the font bolded, your CSS code would look something like this:<\/p>\n<pre>.entry-content ul li{\r\n font-weight: bold;\r\n list-style-image:url(http:\/\/mysite.com\/images\/bullet-16x16.png);\r\n }<\/pre>\n<p>Here\u2019s a look at an image that I uploaded. It looks pretty good, but you\u2019ll notice that the alignment of the image is a little off. The images appear to be a little too high.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118150\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/images-off.jpg\" alt=\"images-off\" width=\"700\" height=\"302\" \/><\/div>\n<\/div>\n<p>If that happens to you, you can take a different approach to using images. Instead of using the \u201clist-style-image\u201d property,\u00a0 you can use the image as a background. That will allow you to then move the image around to get it looking right.<\/p>\n<p>Because we\u2019re using the image as a background, we\u2019re going to need indicate that we don\u2019t want a \u201cnormal\u201d bullet point. In order to do that, we\u2019re going to use \u201clist-style-type: none;\u201d in addition to the background CSS code.<\/p>\n<p>The code I ended up putting into my CSS file looked something like the below. The 5px number is what I played with until it looked right. Of course your image probably won\u2019t be off in exactly the same way mine was, so you\u2019ll have to play with things\u00a0 yourself until it looks right.<\/p>\n<pre>.entry-content ul li {\r\nfont-weight: bold;\r\nlist-style-type: none;\r\nbackground: url(http:\/\/mysite.com\/bullet-16x16.png) no-repeat 7px 5px;\r\nmargin: 0;\r\npadding: 0px 0px 3px 35px;\r\nvertical-align: middle;\r\n}<\/pre>\n<p>And here\u2019s the result.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118151\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/images-as-background.jpg\" alt=\"images-as-background\" width=\"700\" height=\"302\" \/><\/div>\n<\/div>\n<h3><span style=\"text-decoration: underline;\">Adding Unicode Characters<\/span><\/h3>\n<p>Something else you may want to try for bullet points is Unicode characters. Unicode characters are things like \u2764 &#8230; \u2708 &#8230; \u273d.<\/p>\n<p>As mentioned above, by putting in \u201clist-style-type:none;\u201d it removes the normal bullet point. And so that\u2019s what you will need to do here. (Again, we don\u2019t want the normal bullet points showing up. We\u2019re going to replace those with a Unicode character.)<\/p>\n<p>We\u2019re also going to add a different property that will indicate that the character should go before the list item.<\/p>\n<p>Here\u2019s a look at using the \u00a0\u2205 character as a bullet point.<\/p>\n<pre>.entry-content ul li {\r\nlist-style-type: none;\r\nfont-weight: bold;\r\n}\r\n.entry-content ul li:before {\r\ncontent: \"\u2205\";\r\npadding-right: 5px;\r\n}<\/pre>\n<p>And here\u2019s how it looks.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118152\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/html-symbol.jpg\" alt=\"html-symbol\" width=\"700\" height=\"302\" \/><\/div>\n<\/div>\n<p>If you\u2019d like to make the character a different color from the text, then just add the color property to the top section to change the text color, or add the color property to the bottom section to change the bullet point color. Or, of course, you can add color properties to both.<\/p>\n<p>In this example, I\u2019ve added the color property to both.<\/p>\n<pre>.entry-content ul li {\r\nlist-style-type: none;\r\nfont-weight: bold;\r\ncolor: #2E89FF;\r\n}\r\n.entry-content ul li:before {\r\ncontent: \"\u2205\";\r\npadding-right: 5px;\r\ncolor: #FFA62F;\r\n}<\/pre>\n<p>And here\u2019s the result.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118153\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/different-colors.jpg\" alt=\"different-colors\" width=\"700\" height=\"302\" \/><\/div>\n<div class=\"cgrid-col cgrid-col-span-full\"><\/div>\n<\/div>\n<p>As\u00a0 you can see, you don\u2019t use special code in your CSS file to get a Unicode character. Just copy the Unicode character itself and paste it into your CSS code.<\/p>\n<p>You can find <a href=\"http:\/\/unicode-table.com\/en\/\" target=\"_blank\">a list of these symbols here<\/a>. That\u2019s a long list, so here are a few of the more popular ones: <a href=\"http:\/\/unicode-table.com\/en\/#arrows\" target=\"_blank\">arrows<\/a>, <a href=\"http:\/\/unicode-table.com\/en\/#box-drawing\" target=\"_blank\">box drawing<\/a>, <a href=\"http:\/\/unicode-table.com\/en\/#block-elements\" target=\"_blank\">block elements<\/a>, <a href=\"http:\/\/unicode-table.com\/en\/#geometric-shapes\" target=\"_blank\">geometric shapes<\/a>, <a href=\"http:\/\/unicode-table.com\/en\/#miscellaneous-symbols\" target=\"_blank\">miscellaneous symbols<\/a>, and <a href=\"http:\/\/unicode-table.com\/en\/#dingbats\" target=\"_blank\">dingbats<\/a>.<\/p>\n<h3><span style=\"text-decoration: underline;\">WPMU DEV\u2019s Bullet Lists<\/span><\/h3>\n<p>And, finally, we\u2019ll end with this. As you may have noticed, the bullet point lists here on WPMU have a light blue bullet point with a dark blue text. That\u2019s created by separating the bullet point out from text as we did above with the Unicode characters.<\/p>\n<p>The little blue box we use as a bullet point is created by creating a box with CSS (that&#8217;s the two 5px values you see below). While this isn\u2019t exactly the way our code is set up in our stylesheet, the following below should give you the same effect.<\/p>\n<pre>.entry-content ul li {\r\npadding-left: 30px;\r\ncolor: #3D5365;\r\nfont-size: 90%;\r\nposition: relative;\r\nlist-style-type: none;\r\n}\r\n.entry-content ul li:before {\r\ncontent: '';\r\nposition: absolute;\r\nleft: 10px;\r\ntop: 9px;\r\nwidth: 5px;\r\nheight: 5px;\r\nbackground-color: #7AA8CC;\r\n}<\/pre>\n<p>And, of course, this is how it looks. (I\u2019ll include an image here in case we change it, and you\u2019re reading this at a later date.)<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-118155\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/07\/wpmu-style.jpg\" alt=\"wpmu-style\" width=\"700\" height=\"302\" \/><\/div>\n<div class=\"cgrid-col cgrid-col-span-full\"><\/div>\n<\/div>\n<h2>Time to Bite the Bullet<\/h2>\n<p>Do your bullet points look the way you want them to? If not, maybe it\u2019s time to bite the bullet, dig into your stylesheet, and get them up to speed.<\/p>\n<p>Photo credit: <a href=\"http:\/\/www.flickr.com\/photos\/pinksherbet\/3617699772\/\" rel=\"noopener\" target=\"_blank\">D. Sharon Pruitt<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to spice up your bullet lists? We\u2019ve got tips for you.<\/p>\n","protected":false},"author":84404,"featured_media":206024,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[],"class_list":["post-118134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/118134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=118134"}],"version-history":[{"count":5,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/118134\/revisions"}],"predecessor-version":[{"id":205199,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/118134\/revisions\/205199"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/206024"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=118134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=118134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=118134"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=118134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}