Hey there, sorry about that James! Will remember that for next time.
As far as the issue for Michael (thank you for responding!) we registered a sidebar in functions.php – code is below:
add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
/* Register the 'blog' sidebar. */
register_sidebar(
array(
'id' => 'blog',
'name' => __( 'Blog Sidebar' ),
'description' => __( 'Sidebar for the posts page.' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
)
);
/* Repeat register_sidebar() code for additional sidebars. */
}
This is the code we use to call the sidebar in the blog page template (index.php):
<main id="main" class="site-main">
<?php get_sidebar( 'blog' ); ?>
<?php
if ( have_posts() ) {
// Load posts loop.
while ( have_posts() ) {
the_post();
get_template_part( 'template-parts/content/content' );
}
In the blog sidebar widget area, we then added the standard search, recent posts and archive blog widgets. We then styled them with CSS, which is below:
/* Search Bar and Widgets */
h3.widget-title {
font-size: .85em;
color: #333;
font-weight: 500;
text-transform: uppercase;
}
h3.widget-title:after {
content: "";
display: block;
margin: 0;
width: 50px;
padding-top: 15px;
border-bottom: 2px solid #999;
}
.widget_search .search-submit {
display: block;
margin-top: 1rem;
}
input.search-submit {
transition: background 150ms ease-in-out;
background: #5018c2;
border: none;
border-radius: 5px;
box-sizing: border-box;
color: #fff;
font-size: 0.65em;
text-transform: uppercase;
font-weight: 500;
line-height: .85;
outline: none;
padding: 0.55rem .55rem;
text-decoration: none;
vertical-align: bottom;
}
.widget_search .search-field {
width: 75%;
}
input.search-field {
font-size: .85em;
}
.widget-title{
font-size: .85em;
}
#sidebar-blog a {
font-size: .85em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #666;
}
#sidebar-blog a:hover {
font-size: .85em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #5018c2;
}
select#archives-dropdown-3 {
font-size: .65em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
#sidebar-blog .post-date {
font-size: .65em;
font-weight: 400;
letter-spacing: 1;
font-style: italic;
font-family: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
color: #666;
}
#sidebar-blog {
float: right;
padding-right: 5px;
}