Multiple post-specific sidebars

  • Resolved durocketuk

    (@durocketuk)


    8 years, 7 months ago

    Dear WordPress enthousiasts,

    I am trying to design an elegant method to display post-specific contents into the sidebar.

    Inspired by this thread, which ask the same question, I adapted the nice general solution of this thread to query custom fields and display them in the left sidebar area.

    add_action( '__before_left_sidebar', 'du_rock_box' );
function du_rock_box() {
if ( is_singular( 'post') ) {
$rock = get_post_meta( get_the_ID(), 'du_rock', true );
if( ! empty( $rock ) ) {
    echo '<div class="widget_area">'. '<p style="font-size:24px; color:#0000FF;">du Rock</p>' .'</div>';
		echo '<div class="widget_area">'. $rock .'</div>';
    }
  }
}

add_action( '__before_left_sidebar', 'des_carottes_box' );
function des_carottes_box() {
if ( is_singular( 'post') ) {
$carottes = get_post_meta( get_the_ID(), 'des_carottes', true );
if( ! empty( $carottes ) ) {
    echo '<div class="widget_area">'. '<p style="font-size:24px; color:#FF3333;">des Carottes</p>' .'</div>';
		echo '<div class="widget_area">'. $carottes .'</div>';
    }
  }
}

    https://www.hostingpics.net/viewer.php?id=824582Capturede769cran20160817a768013850.png&#8221;

    I like this solution because it allows to keep the content of the text boxes in the relevant post (contrary to multiplying custom widgets with the custom sidebars plugin)

    This is only a proof of concept and I need to be able to further customize the boxes. I have several questions :

    – How do I get the handles of what I have created ? Ideally, I’d like to have two separate text boxes, one for each custom field, and be able to customize them with a specific border, layout, etc.
    For example, I have tried to shift the text down a bit so that it sits below the title of the post, but

    .left.tc-sidebar {
	margin-top: 110px;
}

    does not work. I conclude that left.tc-sidebar is not the correct handle for my object ?

    – Is it possible to add a logo at the top of each text box ? Intuitively, I feel that I am missing a step. My basic understanding of php language tells me that I have just printed some string in the widget area of the left sidebar. So I don’t even have two individual “text widgets” to start with.

    Would anyone have suggestions to head into this direction, and possibly php code snippets ?

    Thanks in advance,

    Benjamin

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter durocketuk

    (@durocketuk)

    Hello,

    I have made some progress. I have designed 2 custom widgets to display the text of 2 specific custom fields of my article in a custom sidebar (created with the custom sidebar plugin)
    https://www.durocketdescarottes.fr/2016/08/22/edimbourg-16-20-juillet-2016

    “Du Rock” is my first widget, “Des carottes” is my second widget

    This should allow me to control the display of each widget independently. However I am unable to control the appearance of these with CSS. I’d like to shift both of them below the title, increase separation between them (i.e., increase top margin of second widget), and have a different background color for each.

    I have inspected my page with Firebug but neither

    .widget_du_rock_widget .widget {
  background-color: rgba(51, 153, 255, 0.1) !important;
	margin-top: 110px !important;
}

    (which is supposed to affect only top widget)

    nor

    .tc-sidebar .left {
  background-color: rgba(51, 153, 255, 0.1);
	margin-top: 110px;
}

    (which is supposed to affect the whole sidebar), works.

    What am I missing ?

    Thanks in advance for your input

    Hi,
    It does affect the top margin. I can see it on your site.

    Alternately, you can also include an id and use the id to style your widget.

    For instance, change your code to,

    add_action( '__before_left_sidebar', 'du_rock_box' );
function du_rock_box() {
if ( is_singular( 'post') ) {
$rock = get_post_meta( get_the_ID(), 'du_rock', true );
if( ! empty( $rock ) ) {
    echo '<div id="my_rock" class="widget_area">'. '<p style="font-size:24px; color:#0000FF;">du Rock</p>' .'</div>';
		echo '<div class="widget_area">'. $rock .'</div>';
    }
  }
}

    and then style it like below.

    #my_rock {
   margin-top: 110px;
}
    Thread Starter durocketuk

    (@durocketuk)

    Thank you Menaka,

    Following your adice, I included an ID in the php code to be able to style it independently.

    If your issue is resolved, will you mark this post as resolved?

    Thread Starter durocketuk

    (@durocketuk)

    Yes, thanks,

    Benjamin

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Multiple post-specific sidebars’ is closed to new replies.