Change Sidebar Order for custom divisions

Wait.. I think you are looking into this way too far.

What exactly are you wanting to do? Just insert a your social icons in the widget area… but NOT actually inside a CSS formatted wiget?

You can add a new widget.. wherever you like.. and just ignore the title field. This “should” give it a distinct separation.

If not.. you can always target the widget you added your social icons to, with a little custom CSS. Each widget get a unique ID (when created) to facilitate isolating it with CSS.

thank you for the reply.

i just want to be able to “widgetize” my new class. In the last hour i changed the code on the sidebar.php on the child theme folder, and now is that one:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>

		<div id="secondary" class="widget-area" role="complementary">

					<aside id="social-icons" class="widget clear">

				<ul>
					<li class="social-twitter">
						<a href="#" title="Twitter" target="_blank"></a>
					</li>
					<li class="social-facebook">
						<a href="#" title="Facebook" target="_blank"></a>
					</li>
					<li class="social-instagram">
						<a href="#" title="Instagram" target="_blank"></a>
					</li>
					<li class="social-contact">
						<a href="#" title="Mail Me" target="_blank"></a>
					</li>
					<li class="social-pinterest">
						<a href="#" title="Pinterest" target="_blank"></a>
					</li>
				</ul>
			</aside>

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

		</div><!-- #secondary -->
	<?php endif; ?>

then i put on the style.css the rules:

/* SOCIAL ICONS IN SIDEBAR */

#social-icons li {
	opacity: 0.7;
}

#social-icons li:hover {
	opacity: 1;
	-webkit-transition: 200ms opacity;
}
#social-icons a:link,
#social-icons a:visited {
	display: block;
	float: left;
	text-indent: -9999px;
	width: 50px;
	height: 50px;
}

.social-twitter a {
	background: url('images/twitter.png') no-repeat;
}

.social-facebook  a {
	background: url('images/facebook.png') no-repeat;
}

.social-pinterest a {
	background: url('images/pinterest.png') no-repeat;
}

.social-contact a {
	background: url('images/gmail.png') no-repeat;
}

.social-instagram a {
	background: url('images/instagram.png') no-repeat;
}

now i ve my new widget in the sidebar, and it works. BUT, the sad thing is that it is located on the top of the sidebar, and i’m not able to bring this element under any other widget.

do you think that there’s a way to really transform what i made in a simple widget to place wherever i want like the others under Aspect->Widget ? how can i achieve that?

I mean… what are you wanting to do?

You’re getting into a complete re-write of your code.. and I really don’t think that’s necessary.

But, for sanity sake… let’s make sure I first understand what exactly you are wanting to do.. and why it didn’t work in the first place… prompting you into all of this “rewrite frenxy” ??

EDIT: Are you developing a theme?

i m simply making a child theme of 20 12. (or better, a frankenstein child theme ;))

i think it’s not this complex.

– I ve a sidebar with widgets.
– I wrote a new aside div for this sidebar with customizable social icons.
– this new working div appears on the top of my sidebar.
– i just want to place it wherever i want.

the best thing in the world would be to transform this div in a real widget, so i could go in Aspect–>Widget and drag it where i want to.
But this is not forcely what i need. I just need to place inbetween two widgets.

Normally, if i want to change the order of appearance of something like the content, i just need to copy and paste the code, up or down another element. But the sidebar.php isn’t like the other pages, it hasn’t the code of each widget. I only need to find the template where is written the whole code of my sidebar.

Okay… so create a new Text widget… and drag it to wherever you want it to appear in your sidebar.

Now, don’t give it a title… just add some arbitrary text like “Hello World”.

Now, view the widget from the front-end.

NOTE: You may also include html in the text widgets.

thanks for the reply but i think we didn’t reach a good solution.

what i have is some fresh new php code (not html) for my social icons. I repeat the code that i’ve in my sidebar.php child theme:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>

		<div id="secondary" class="widget-area" role="complementary">

					<aside id="social-icons" class="widget clear">

				<ul>
					<li class="social-twitter">
						<a href="#" title="Twitter" target="_blank"></a>
					</li>
					<li class="social-facebook">
						<a href="https://www.facebook.com/lo.damerica" title="Facebook" target="_blank"></a>
					</li>
					<li class="social-instagram">
						<a href="#" title="Instagram" target="_blank"></a>
					</li>
					<li class="social-contact">
						<a href="#" title="Mail Me" target="_blank"></a>
					</li>
					<li class="social-pinterest">
						<a href="#" title="Pinterest" target="_blank"></a>
					</li>
				</ul>
			</aside>

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

		</div><!-- #secondary -->
	<?php endif; ?>

(the style.css is already posted in this discussion). With this code i ve some wonderfull made-by-me social icons on the top of the sidebar. I just want to put them wherever i want in the sidebar just like a normal widget.

the text widget didn’t work at all, i’ve got my icons in the sidebar but there were too many visualization error, and everytime i return to the dashboard, automatically this next text widget disappears. I guess is because i haven’t html but only php.

please, i don’t think i m asking the impossible. Just to move an object which is not a widget, in the sidebar.

You don’t need all the php stuff.

Just paste this into a text widget:

<aside id="social-icons" class="widget clear">
	<ul>
		<li class="social-twitter">
			<a href="#" title="Twitter" target="_blank"></a>
		</li>
		<li class="social-facebook">
			<a href="https://www.facebook.com/lo.damerica" title="Facebook" target="_blank"></a>
		</li>
		<li class="social-instagram">
			<a href="#" title="Instagram" target="_blank"></a>
		</li>
		<li class="social-contact">
			<a href="#" title="Mail Me" target="_blank"></a>
		</li>
		<li class="social-pinterest">
			<a href="#" title="Pinterest" target="_blank"></a>
		</li>
	</ul>
</aside>