-
AuthorPosts
-
January 19, 2024 at 5:36 pm #1431505
I am sorry for the new post here as I know the questions and answer around the Blog Post template are extensive.
I am trying to appease a client who would like to have the ability to post ads on the actual post pages. So, essentially, I need modifications to the post template.
Under Theme Options > Blog Layout, I have chosen, “Use the advance layout editor to build your own blog.” In Quick CSS, I have the following:
/* CSS – Remove sidebar on blog category */
#top.archive.category .sidebar {
display: none!important;
border: none!important;
}#top.archive.category .content{
width: 100%;
border: none !important;
}/* CSS – increase heading size on featured blog post on home page. */
#top.home #wrap_all .main_color .post-entry.tag-featured-post h2.post-title {
font-size:30px;
}
#top.home #wrap_all .post-entry.bloglist-simple .blog-categories a {
font-size:12px;
}/* CSS – hide categories on home page blog element in list view – simple */
span.blog-categories.minor-meta {
display: none !important;
}span.blog-categories.minor-meta + span.text-sep {
display: none;
}I am wanting to keep the functionality of having a Blog Post page template. In other words, I want to keep blog post navigation, single post styles and blog archive functionality.
Is there any way to introduce a left and right column to the blog post template without breaking the blog functionality? In my case, we could have the right column stay “as-is” for widgets, currently Categories, Archives and Receivve Posts by Email. Per my client’s request the left column could be reserved for ads.
I should mention that “ads” as it relates to this client, are hand fabricated images, (jpg or png) that he is managing manually. The “graphic” ads, simply link out to the advertiser’s sites.
See an example of the ads on the current home page here: https://www.woodyboater.com
See a sample of a current blog post here: https://www.woodyboater.com/classic-boat-art/art-gets-paul-harvey-to-tell-the-rest-of-the-story/
Thank you.
Bill Basler
January 20, 2024 at 11:07 pm #1431602Hey William,
To show dual sidebars you can try this customization, first set your sidebar on your post to a “right sidebar” then in your child theme add this custom “sidebar.php”<?php if ( ! defined( 'ABSPATH' ) ) { die(); } // Display both left and right sidebars echo "<aside class='sidebar sidebar_left' " . avia_markup_helper( array( 'context' => 'sidebar', 'echo' => false ) ) . '>'; echo '<div class="inner_sidebar extralight-border">'; // Display the subnavigation for pages $av_sidebar_menu = avia_sidebar_menu( false ); if( $av_sidebar_menu ) { echo $av_sidebar_menu; } $the_id = @get_the_ID(); $custom_sidebar = ''; if( ! empty( $the_id ) && is_singular() ) { $custom_sidebar = get_post_meta( $the_id, 'sidebar', true ); } /** * @param string $custom_sidebar * @return string */ $custom_sidebar = apply_filters( 'avf_custom_sidebar', $custom_sidebar ); if( $custom_sidebar ) { dynamic_sidebar( $custom_sidebar ); } else { if( empty( $avia_config['currently_viewing'] ) ) { $avia_config['currently_viewing'] = 'page'; } // general shop sidebars if( $avia_config['currently_viewing'] == 'shop' && dynamic_sidebar( 'Shop Overview Page' ) ) { // Do nothing here } // single shop sidebars if( $avia_config['currently_viewing'] == 'shop_single' ) { // Do nothing here } if( $avia_config['currently_viewing'] == 'shop_single' && dynamic_sidebar( 'Single Product Pages' ) ) { // Do nothing here } // general blog sidebars if( $avia_config['currently_viewing'] == 'blog' && dynamic_sidebar('Sidebar Blog') ) { // Do nothing here } // custom left sidebar if( $avia_config['currently_viewing'] == 'page' && dynamic_sidebar('left-sidebar') ) { // Do nothing here } // general archive sidebars if( avia_get_option( 'archive_sidebar' ) == 'archive_sidebar_separate' ) { if( $avia_config['currently_viewing'] == 'archive' && dynamic_sidebar( 'Sidebar Archives' ) ) { // Do nothing here } } // general pages sidebars if( $avia_config['currently_viewing'] == 'page' && dynamic_sidebar( 'Sidebar Pages' ) ) { // Do nothing here } // forum pages sidebars if( $avia_config['currently_viewing'] == 'forum' && dynamic_sidebar( 'Forum' ) ) { // Do nothing here } // global sidebar if( dynamic_sidebar( 'Displayed Everywhere' ) ) { // Do nothing here } /** * Filter to show default dummy sidebar * * @param false|string $default_sidebar * @return false|string */ if( apply_filters( 'avf_show_default_sidebars', $default_sidebar ) ) { if( apply_filters( 'avf_show_default_sidebar_pages', true ) ) { avia_dummy_widget(2); } if( apply_filters( 'avf_show_default_sidebar_categories', true ) ) { avia_dummy_widget(3); } if( apply_filters( 'avf_show_default_sidebar_archiv', true ) ) { avia_dummy_widget(4); } // customize default sidebar and add your sidebars do_action ( 'ava_add_custom_default_sidebars' ); } } echo '</div>'; echo '</aside>'; // Right sidebar echo "<aside class='sidebar sidebar_right' " . avia_markup_helper( array( 'context' => 'sidebar', 'echo' => false ) ) . '>'; echo '<div class="inner_sidebar extralight-border">'; // Display the subnavigation for pages $av_sidebar_menu = avia_sidebar_menu( false ); if( $av_sidebar_menu ) { echo $av_sidebar_menu; } $the_id = @get_the_ID(); $custom_sidebar = ''; if( ! empty( $the_id ) && is_singular() ) { $custom_sidebar = get_post_meta( $the_id, 'sidebar', true ); } /** * @param string $custom_sidebar * @return string */ $custom_sidebar = apply_filters( 'avf_custom_sidebar', $custom_sidebar ); if( $custom_sidebar ) { dynamic_sidebar( $custom_sidebar ); } else { if( empty( $avia_config['currently_viewing'] ) ) { $avia_config['currently_viewing'] = 'page'; } // general shop sidebars if( $avia_config['currently_viewing'] == 'shop' && dynamic_sidebar( 'Shop Overview Page' ) ) { // Do nothing here } // single shop sidebars if( $avia_config['currently_viewing'] == 'shop_single' ) { // Do nothing here } if( $avia_config['currently_viewing'] == 'shop_single' && dynamic_sidebar( 'Single Product Pages' ) ) { // Do nothing here } // general blog sidebars if( $avia_config['currently_viewing'] == 'blog' && dynamic_sidebar('Sidebar Blog') ) { // Do nothing here } // custom right sidebar if( $avia_config['currently_viewing'] == 'page' && dynamic_sidebar('right-sidebar') ) { // Do nothing here } // general archive sidebars if( avia_get_option( 'archive_sidebar' ) == 'archive_sidebar_separate' ) { if( $avia_config['currently_viewing'] == 'archive' && dynamic_sidebar( 'Sidebar Archives' ) ) { // Do nothing here } } // general pages sidebars if( $avia_config['currently_viewing'] == 'page' && dynamic_sidebar( 'Sidebar Pages' ) ) { // Do nothing here } // forum pages sidebars if( $avia_config['currently_viewing'] == 'forum' && dynamic_sidebar( 'Forum' ) ) { // Do nothing here } // global sidebar if( dynamic_sidebar( 'Displayed Everywhere' ) ) { // Do nothing here } /** * Filter to show default dummy sidebar * * @param false|string $default_sidebar * @return false|string */ if( apply_filters( 'avf_show_default_sidebars', $default_sidebar ) ) { if( apply_filters( 'avf_show_default_sidebar_pages', true ) ) { avia_dummy_widget(2); } if( apply_filters( 'avf_show_default_sidebar_categories', true ) ) { avia_dummy_widget(3); } if( apply_filters( 'avf_show_default_sidebar_archiv', true ) ) { avia_dummy_widget(4); } // customize default sidebar and add your sidebars do_action ( 'ava_add_custom_default_sidebars' ); } } echo '</div>'; echo '</aside>'; ?>
then in your child theme functions.php add this function:
function custom_theme_widgets_init() { register_sidebar( array( 'name' => esc_html__( 'Left Sidebar', 'text-domain' ), 'id' => 'left-sidebar', 'description' => esc_html__( 'Add widgets here to appear in the left sidebar.', 'text-domain' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>', ) ); register_sidebar( array( 'name' => esc_html__( 'Right Sidebar', 'text-domain' ), 'id' => 'right-sidebar', 'description' => esc_html__( 'Add widgets here to appear in the right sidebar.', 'text-domain' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>', ) ); } add_action( 'widgets_init', 'custom_theme_widgets_init' ); function custom_left_sidebar() { ?> <script> (function($) { $('.single-post .sidebar_left').detach().insertBefore('.single-post .content.av-main-single'); })(jQuery); </script> <?php } add_action( 'wp_footer', 'custom_left_sidebar', 99 );
then add this custom CSS:
.responsive .single-post .container { max-width: 98%; } #top.single-post #main .sidebar { display: inline-block; width: 20%; border: none; } #top.single-post .content.units.alpha.av-main-single { width: 58%; clear: none; border:none; } #top.single-post #main .sidebar.sidebar_left { float: left; }
Now you will have two new sidebars:
the other widget areas will also still work for the default sidebar position if you wish.
You will now have dual sidebars:
Please note that for there to be room for the second sidebar we used the css to change the width of the page and the main content and the sidebars, you can tinker with the css above to suit your needs.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.