We add sidebar widgets in the Widgets admin screen, which you access via Appearance | Widgets.
- Drag the Recent Posts widget (in the list of available widgets on the left) to the sidebar widget area on the right.
- Give it a title of
Features:and type3in the Number of posts to show field. - Click on Save to save the widget.
- Drag the Categories widget to the sidebar widget area and give it a title of
Columns:. Click on Save to save it. - Drag the Archives widget to the sidebar widget area and give it a title of
Past Issues:. Click on Save to save it.
We added three widgets to our sidebar. Now let's see how they look in the live site:
You'll notice that the styling is a little bit off:
- There's a bullet point before each of our headings. That's because WordPress automatically puts each widget inside a
<li>tag. We can easily fix that with some CSS to tell browsers to display lists in the sidebar differently:aside li { list-style-type: none; } - You'll also notice that all of the sidebar widgets are displayed in one box with the same styling, rather than in three separate boxes like our mockup. That's because the mockup uses three separate
<aside>elements while we've used just one. There are three ways we could fix this:- Add three separate widget areas to our sidebar (instead of one widget area with three widgets), each in an
<aside>with the appropriate styling—not best practice as it's adding lots of extra HTML just to achieve styling - Apply the styling we set for the mockup to the new classes WordPress has given to our widgets inside the widget area
- A better approach is to use the same classes and IDs that WordPress uses when we're creating our mockup, that way the design will work perfectly with no tweaks
- Add three separate widget areas to our sidebar (instead of one widget area with three widgets), each in an
We won't worry about that too much now as the site still looks fine, but if you want to tinker with the CSS, go ahead!
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.