Custom Sidebar to Use in First Page Above Featured Content as Announcement

  • Resolved Adi Azudin

    (@adiazudin)


    9 years, 8 months ago

    Firstly before we start you can visit to my blog.

    These are the steps that I applied:

    Step 1:
    I created New Sidebars from Theme Options. I named the Sidebar ID: sidebar-announcement

    Step 2:
    I created new php file in Child Theme, which is the name sidebar-announcement.php

    The coding inside php file are:

    <?php dynamic_sidebar('sidebar-announcement'); ?>

    Step 3:
    I put some coding into index.php, because I want the announcement appear above featured content.

    The coding inside php file are:

    <?php get_header(); ?>

<section class="content">

	<?php get_template_part('inc/page-title'); ?>

	<div class="pad group">

		<?php include ('sidebar-announcement.php'); ?>

		<?php get_template_part('inc/featured'); ?>

		<?php if ( have_posts() ) : ?>

			<?php if ( ot_get_option('blog-standard') == 'on' ): ?>
				<?php while ( have_posts() ): the_post(); ?>
					<?php get_template_part('content-standard'); ?>
				<?php endwhile; ?>
			<?php else: ?>
			<div class="post-list group">
				<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
					<?php get_template_part('content'); ?>
				<?php if($i % 2 == 0) { echo '</div><div class="post-row">'; } $i++; endwhile; echo '</div>'; ?>
			</div><!--/.post-list-->
			<?php endif; ?>

			<?php get_template_part('inc/pagination'); ?>

		<?php endif; ?>

	</div><!--/.pad-->

</section><!--/.content-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

    Step 4:
    I can used the sidebar-announcement in widget area and put some text for first announcement. That’s all.

    Question:
    If you guys get through 2nd page, you still be able to see the announcement. How to make the announcement ONLY CAN VIEW on 1st page. What is the code that I need to put inside php file?

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi adiazudin. In index.php try changing your include to this:

    <?php if ( ! is_paged ) { include ('sidebar-announcement.php'); } ?>

    Here is the Codex reference for the is_paged function.

    Thread Starter Adi Azudin

    (@adiazudin)

    Hi Bdbrown,
    Omg, its gone, my announcement not appear at all.

    Sorry; missed a bracket set. Try this:

    <?php if ( ! is_paged() ) { include ('sidebar-announcement.php'); } ?>
    Thread Starter Adi Azudin

    (@adiazudin)

    Great, it works! Thank you so much Bdbrown.

    Thread Starter Adi Azudin

    (@adiazudin)

    One more, if I wanna use CSS to style the announcement, need to use sidebar ID right?

    .sidebar-announcement {
  ... style here ...
}

    That’s the sidebar name but it’s not used for styling. If you look at the source code that’s generated by your text widget you’ll see a number of containers with IDs and classes:

    <div id="black-studio-tinymce-2" class="widget widget_black_studio_tinymce"><div class="textwidget"><p class="ui-sortable-handle" style="text-align: justify;"><div class="su-note" style="border-color:#c2d4de;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;"><div class="su-note-inner su-clearfix" style="background-color:#d8ecf7;border-color:#f7fbfd;color:#33363b;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;"></p>
<p class="ui-sortable-handle" style="text-align: justify;">Tema blog telah sempurna dikemaskini. Tiada sebarang <strong>'pop up'</strong> atau <strong>'iklan penuh'</strong> dipasang kecuali iklan pada header, sidebar & single post sahaja, supaya anda tidak terganggu.</div></div></p>
<p class="ui-sortable-handle"><div class="su-spacer" style="height:40px"></div></p></div></div>

    The IDs and classes are used for css. The ID can only be used once on a page but classes can be used multiple times. So, if you have a text widget used in multiple locations on a page or within your site, and you use a class like “.textwidget”, it will affect every widget that has that class. If you only wanted to target one widget you’d have to be more specific by adding another class or an ID in your css identifier.
    So, depending on what you want to style in your ad, you could use a class from the main <div> container, like “.widget_black_studio_tinymce”. Or you might use the class “.su-note” on the note <div>. If either of those are used elsewhere on the page, and you only want to target this particular ad, you would need to add a unique identifier to the main <div> in your widget. That could be another ID or class, and would be included within the quotes like you see on the top level <div> class. If it’s an ID then you could use something like “#my-main-ad” as your css identifier.

    Thread Starter Adi Azudin

    (@adiazudin)

    Nice explanation Bdbrown. I’m learning much further and clear now. Now this topic can mark as resolved.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Custom Sidebar to Use in First Page Above Featured Content as Announcement’ is closed to new replies.