• Hello. We have created a custom sidebar so that the page that displays posts (blog page) in Twenty Nineteen could look similar to others that we like, with a place to put an archive and search widgets.

    For some reason the widgets within the sidebar that we’ve created are not functional. Also wondering how to get the sidebar to float to the right of the posts. We’ve been able to get a lot of workaround type items to work in this theme but are stumped on this. We don’t want to have to go to an entirely new theme just to put up a blog page. Thank you for any help you can provide!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • please post all the code used to create your custom sidebar, and state in which files the codes were added.

    Moderator James Huff

    (@macmanx)

    Hi there @dwkelley I see you reported this thread to the moderators. Please note that we are just the folks who enforce the rules around all of www.remarpro.com.

    Reporting to moderators doesn’t get any faster support, instead it just kind of attracts attention from folks whose radar you probably don’t want to be on. ??

    If you really do need a moderator, please add a reply letting us know why before you hit the report button.

    Thread Starter dwkelley

    (@dwkelley)

    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;
    }
    Thread Starter dwkelley

    (@dwkelley)

    I should probably add that this has all been done in a child theme of Twenty Nineteen

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom Sidebar on Blog Page non functional’ is closed to new replies.