Blog Post: Custom WordPress Sidebar List Items

Red Deer & Blackfalds Web Design Writes:

When developing a website using WordPress as your given CMS, it is important to make sure you are taking measures to make your websites that much more custom for your users. This is important as in the ever growing industry of Web Design and Development more and more people are downloading and using templates to build websites. This is fine if you as a business owner are willing to take this on; however, it is important to keep in mind a high quality developer can add certain elements to your website that will make it that much more visually attractive and interesting.

Here is a quick and easy bit of code that you can insert into your WordPress Child Theme to add some custom icon images to the List Items on the sidebar of your website. This, of course, is most appropriate for websites utilizing a blog format and want to help train the eye of your reader to segregate between blog posts, recent comments, monthly archives and category selections. Of course in order to make this happen you need to download the ET Modules Font and then add it to your server by means of Adding an EOT/TTF file to your CSS file.

See below for the code, and also in the sidebar of this site for an example (Note: sidebar not viewable on mobile devices):

/* recent entries as a page icon */
#sidebar .widget_recent_entries ul li:before {font-family: ‘ETmodules’; content: ‘\6c ‘ ;}

/* recent comments as a quote bubble icon */
#sidebar .widget_recent_comments ul li:before {font-family: ‘ETmodules’; content: ‘\76 ‘ ;}

/* recent categories as a folder icon */
#sidebar .widget_categories ul li:before {font-family: ‘ETmodules’; content: ‘\6d ‘ ;}

/* monthly archives as a calendar icon */
#sidebar .widget_archive ul li:before {font-family: ‘ETmodules’; content: ‘\e023 ‘ ;}

/* fixing spacing issues and margin issues on above widget sections ul li */
#sidebar .widget_recent_entries ul li, #sidebar .widget_recent_comments ul li, #sidebar .widget_categories ul li, #sidebar .widget_archive ul li { list-style-position: inside; text-indent: -1.5em; padding-left: 1em; background: none !important;}
#sidebar .widget_recent_entries ul, #sidebar .widget_recent_comments ul, #sidebar .widget_categories ul, #sidebar .widget_archive ul {margin-left: 15px; list-style-none !important;}

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)