• Resolved Zedler815

    (@zedler815)


    My current theme does not have one (magazino theme by WPThemes NZ).

    Is there an easy way to add a side bar to your existing theme? I am not a coder.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Is there an easy way to add a side bar to your existing theme? I am not a coder.

    I will defer to the “I am not a coder” note and suggest a theme with a sidebar, many good ones can be found by using the filters at themes link above….

    Is there an easy way to add a side bar to your existing theme? I am not a coder.

    there is no easy way (if you are not a coder);

    so here is the complicated way:

    – register the new sidebar in functions.php; http://codex.wordpress.org/Function_Reference/register_sidebar
    find the existing code, copy/paste it directly after the original; change the name and id.
    example – section after the edits:

    /**
     * Register widgetized area and update sidebar with default widgets
     */
    function magazino_widgets_init() {
    	register_sidebar( array(
    		'name' => __( 'Footer Sidebar', 'magazino' ),
    		'id' => 'sidebar-1',
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget' => "</aside>",
    		'before_title' => '<div class="widget-title">',
    		'after_title' => '</div>',
    	) );
    	register_sidebar( array(
    		'name' => __( 'Side Sidebar', 'magazino' ),
    		'id' => 'sidebar-2',
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget' => "</aside>",
    		'before_title' => '<div class="widget-title">',
    		'after_title' => '</div>',
    	) );
    
    }
    add_action( 'widgets_init', 'magazino_widgets_init' );

    – create a new sidebar-side.php template from a copy of sidebar.php; change the id in dynamic_sidebar() http://codex.wordpress.org/Function_Reference/dynamic_sidebar to match what you edited in functions.php;

    example code of sidebar-side.php:

    <?php
    /**
     * The Sidebar on the side, containing the main widget areas.
     */
    ?>
    		<div id="sidebar-side" class="widget-area clearfix" role="complementary">
    
    			<?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
    
                    <aside id="meta" class="widget">
    					<div class="widget-title"><?php _e( 'Login/out', 'magazino' ); ?></div>
    					<ul>
    						<?php wp_loginout(); ?>
    					</ul>
    				</aside>
    
                    <aside id="tag_cloud" class="widget">
    					<div class="widget-title"><?php _e( 'Tags', 'magazino' ); ?></div>
    					<ul>
    						<?php wp_tag_cloud(); ?>
    					</ul>
    				</aside>
    
    			<?php endif; // end sidebar widget area ?>
    		</div><!-- #sidebar .widget-area -->

    – edit sidebar.php and add the call for the new sidebar <?php get_sidebar('side'); ?> at the top;
    example – section after the edits:

    <?php
    /**
     * The Sidebar containing the main widget areas.
     */
    ?>
    
            <?php get_sidebar('side'); ?>
    
    		<div class="clearfix"></div>
    		<div id="sidebar" class="widget-area clearfix" role="complementary">

    – edit style.css and add new styles for the fromatting of the sidebar at the end of style.css;
    example for a right sidebar)

    /******************************************************************
    side sidebar styles
    ******************************************************************/
    #main {
    	width: 73%;
    	float: left;
    }
    #sidebar { clear: left; }
    
    #sidebar-side {
    	width: 24%;
    	margin-left: 0;
    	padding-left: 2%;
    	float: right;
    }
    @media only screen and (max-width: 2000px) {
    #sidebar-side { width: 26%;	}
    }
    
    article.post-box[id*="post-"] {
    	padding-left: 1.3%;
    	padding-right: 1.3%;
    }
    
    #sidebar-side {
    	background: #2b2b2b;
    	padding-top: 1px;
    	border-top: 2px solid #9dbb41;
    }
    #sidebar-side .widget {
    	margin: 2em 0;
    	padding-right: 2em;
    	color: #fff;
    	text-shadow: 1px 1px #000;
    }
    #sidebar-side .widget a {
    	color: #eee;
    	text-decoration: none;
    }
    #sidebar-side .widget a:hover {
    	text-decoration: underline;
    }
    #sidebar-side .widget li,
    #meta.widget aside a {
    	border-top: 1px dotted #5b5b5b;
    	margin-bottom: 0;
    	padding: 7px 0;
    }
    #sidebar-side .widget li:last-child {
    	border-bottom: 1px dotted #5b5b5b;
    }
    #sidebar-side .widget ul.sub-menu li:last-child,
    #sidebar-side .widget ul.children li:last-child {
    	border-bottom: 0;
    }
    #sidebar-side .widget-title {
    	font-family: "Fjalla One", "Arial Narrow", Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	text-transform: uppercase;
    	color: #9dbb41;
    }

    (the styles do not take into account the various cases of @media styles; particularly, there are no provisions for a suitable adaptation of the layout in narow screens such as smart phones or tablets …)
    not widely tested; this worked in my local test site; looks ok in IE7 as example for an older unresponsive browser, and FF17 as an example for a more modern browser; no further support intended.

    Thread Starter Zedler815

    (@zedler815)

    alchymyth,

    I guess I underestimated myself because it is almost 6am in my part of the Earth and I am tired…BUT was still able to follow your directions wonderfully! Only took me about 10-15 minutes to get my sidebar up and going from following your instructions. Honestly, as I was installing the new version of the theme with the sidebar, I was not optimistic and didn’t expect it to work, but it did! THANK YOU SO MUCH! I think anyone can follow those instructions as long as they understand the very bare basics of it (which is the category I fall under).

    Again, I HIGHLY appreciate you taking your time to answer my question. YOU ROCK! 😀

    -Sara

    Great Posts!! I am having a problem though. My right sidebar is resting at the bottom on the page content section. The alignment of everything is right, but it won’t pop up beside it.

    Any ideas?

    @lryan628: As per the Forum Welcome, please post your own topic. This is a 6 month old topic on a different subject.

    Closing topic.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to ADD a sidebar?’ is closed to new replies.