Blog: Starting a new design for my blog – Part 4 (More Posts)
The 4th of my blog where I walk through the process of making a WordPress theme
- I started by making a new plan and created the template files needed for a new WordPress theme.
- The WordPress Loop gets all the content from WordPress Posts, or Pages depending on the page template used and displays all its contents. In the second part, I outline how to bring content dynamically into your posts and pages with the Loop.
- In part 3 I wrote about how I to put together and styled a single.php template.
It’s time to think about widgetising the work I’ve done so far by adding widget areas to the secondary content area.
Let’s start by making widget functionality available to the admin area by adding support for it in functions.php.
<?php
// add theme supports
add_theme_support( "widgets" );
?>The function for making Widget sidebars is very straightforward. It uses an array as an argument. So we can add code like this in functions.php when we want to make a new widget area. Using the array allows us to specify a few customisations for our widget areas and makes it identifiable with a unique string.
<?php
// Dynamic Sidebars and Widget Area - register_sidebar()
register_sidebar( array (
'name' => __( 'Recent Posts'),
'id' => 'jgblog_recentposts',
'description' => __( 'description for this widget goes here')
)
); So far, I’ve activated widgets in the admin area and created an instance of a Widget Area within it. I can see it on the widgets page and am now ready to find a place for the widget to go. For the design I currently have, they should go somewhere in the secondary section.
<?php dynamic_sidebar(); ?>Below, I provide a string to the method that matches the ID string of one of the register sidebar functions.
<?php dynamic_sidebar( "jgblog_html_one" ); ?>There are multiple aside elements for each widget to go into. I could use a div or a span but for now, I’ll stick with Aside.
Below is the markup for 3 widget areas that each have a call to the widget as if they were specified in functions.php. (This assumes the functions file has been updated to create these areas).
<article class="secondary">
<h2>Widgets Title</h2>
<aside class = "widget_area widget_html">
<?php dynamic_sidebar( "jgblog_html_one" ); ?>
</aside>
<aside class = "widget_area widget_recent">
<h3>Recent Blogs</h3>
<?php dynamic_sidebar( "jgblog_recentposts" ); ?>
</aside>
<aside class = "widget_area widget_search">
<h3>Widget 3</h3>
<?php dynamic_sidebar( "jgblog_search_one" ); ?>
</aside>
</article>Now let’s do some CSS styling.
I’ve given each <aside> element a class of “.widget_area” which I’m using to style the container element of each Widget area. In this example, I’ve made sure the elements have a yellow background with a visible border and applied some spacing and separation with padding and margins.
.section {
.secondary {
.widget_area {
display: block;
background: yellow;
margin: 10px 10px;
padding: 4px;
width: 80%;
border: solid black 3px;
h3 {
//
}
p {
//
}
}
}
}Below, I have grouped selectors for the individual widget areas according to their type. I’ve been able to group them like this because each selector has the same job, which is to remove these list item bullets for all widget areas. This is applicable for Custom HTML, Recent Posts, Search, and Archive Widgets.
body {
section {
.secondary {
h2 {
text-align: center;
}
.widget_html,
.widget_search,
.widget_recent,
.widget_archive,
.widget_block {
list-style: none;
}
}
}
}Custom HTML Widgets
The first widget type I’ll take a closer look at is the Custom HTML widget. I’ve assigned it one of the aside container elements but it’s up to the widgets to provide the rest of the markup. In the example below you get a list item element with 2 classes.
<aside class="widget_area widget_html>
<li id="" class="widget widget_block">
...
</li>
</aside>It’s a little hard to account for every eventuality here because this is a custom HTML element which theoretically could be any combination of elements like any other document. However, the following group of selectors should be enough for most cases.
.widget_html {
p {
/* color: red; */
}
span {
/* color: red; */
}
div {
/* color: red; */
}
em, i {
/* color: green; */
}
strong, b {
/* color: green; */
}Let’s make some more widget areas. one each for custom HTML, search, recent blogs, and archive areas.
<aside class = "widget_area widget_html">
<?php dynamic_sidebar( "jgblog_html_one" ); ?>
</aside>
<aside class = "widget_area widget_recent">
<?php dynamic_sidebar( "jgblog_recentposts" ); ?>
</aside>
<aside class = "widget_area widget_search">
<?php dynamic_sidebar( "jgblog_search_one" ); ?>
</aside>
<aside class = "widget_area widget_archive">
<?php dynamic_sidebar( "jgblog_archive_one" ); ?>
</aside>Recent Posts Widget
I made a “recent posts” widget which generates an list item. And in that list item is one undordered list element with a set of child hyperlinks for every existing WordPress post.
<li>
<ul>
<li> <a> </a> </li>
<li> <a> </a> </li>
</ul>
</li>Below I pushed list items slightly to the left using padding, increased the line height for each list item, and made the text bold for clarity.
ul {
li {
/* list-style: square; */
padding-left: 5px;
line-height: 1.5;
a {
color: darkgreen;
transition: color .3s;
&:hover {
color: red;
}
}
}
}Widget Search
Search widgets generate an HTML form that contains a form label and a div element. And inside the div element there’s a text input field and an HTML button.
<div class="">
<input type="search">
<button> Text </button>
</div>Select the elements in CSS by their class name and use them to start customisaing their appearance
.widget_search {
(form) wp-block-search__button-outside {
.wp-block-search__label { }
.wp-block-search__inside-wrapper{ }
}
}In my example Added CSS and Selectors for these buttons to match the rest of the website contents.
- Used the label element as the title for the widget area rather than having a heading for the container element.
- Added a background to the text input on hover to indicate when it has focus and that it is editable.
- Added a background colour and border with appropriate spacing to the button.
.widget_search {
label {
display: inline-block;
color: black;
margin-top: 20px;
font-size: 15pt;
font-weight: bold;
}
.wp-block-search__inside-wrapper {
.wp-block-search__input {
border: solid 3px black;
padding: 10px;
border-radius: 5px;
font-size: 14pt;
&:hover {
background: lightyellow;
}
}
.wp-block-search__button {
background: yellow;
width: 50px;
border: solid 3px black;
padding: 0 5px;
}
}Archive Widgets
An archive widget is an unordered list of hyperlinks inside a single list item, which is slightly convoluted. I’m not entirely sure if it’s valid HTML but that’s how it works
<li class="widget_archive">
<ul class="wp-block-archives">
<li>
<a href=""></a>
</li>
</ul>And the CSS Selectors
li.widget_archive {
ul.wp-block-archives {
li {
a {
}
}
}
}
Now we know how to use widget areas and style them accordingly. There are more widgets than this available but this blog will hopefully give you an idea of how WordPress widgets work in the document tree, how to place them on your website, and to style them according to your needs.
The next part will start on the most difficult challenge yet of this project, yet; working on post-pagination.