WordPress.org

Support

Support » How-To and Troubleshooting » Customizing twentytwelve sidebar elements

Customizing twentytwelve sidebar elements

  • Hi,
    I’m working on a custom template based on twentytwelve.
    I want to customize the list elements of the sidebar widgets, for example adding a fontawesome icon before the elements.
    I took a look at sidebar.php but it just sets the dynamic sidebar which is set in functions.php but nothing about coding and editing the list elements.

    Which files should I edit to do that?

    Thank you in advance!

Viewing 13 replies - 1 through 13 (of 13 total)
  • You can change the icon for the list elements using CSS.

    Try adding the following to the end of your child theme’s style.css:

    .widget ul {
       list-style-image: url('sqpurple.gif');
    }

    Replace sqpurple.gif with your icon file name.

    I thank you vtxyzzy but the problem isn’t the styling but to edit the side bar like adding an element or a paragraph or anything else near the sidebar voices.
    For example: a leaf before the list element

    If you use a leaf icon in the CSS I gave you, it will add a leaf beside every element.

    I mean, adding even more HTML code or editing the PHP that generates list elements.

    There are several widgets that will let you code PHP in the widget so you can make the content whatever you want.

    Ok, I really thank you for your kind suggestions but that’s not what I’m searching for.
    What I need is to know which are the files that calculate and generate the sidebar or better: which files are used at the call of get_sidebar() function?

    Thank you!

    Have you looked at sidebar.php? (I am not at home right now so I can’t look to see if that is the correct file.) Some things may be controlled by code in WP core files.

    Yeah I checked it but it just runs this:

    <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    		<div id="secondary" class="widget-area" role="complementary">
    			<?php dynamic_sidebar( 'sidebar-1' ); ?>
    		</div><!-- #secondary -->
    	<?php endif; ?>

    The function dynamic_sidebar() is in the core file wp-includes/widgets.php. You should not modify this file!!

    You should stick to coding your own PHP in a widget.

    The function dynamic_sidebar() is in the core file wp-includes/widgets.php. You should not modify this file!!

    You should stick to coding your own PHP in a widget.

    Yes, I know….and we’re at the start of the topic again: what if I want to put PHP code or HTML before every list element???

    Not styling the widget with CSS.
    Not putting HTML code in a single or different widget (so not a text-widget).
    Just putting new code before every widget LIST ELEMENT.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Just putting new code before every widget LIST ELEMENT.

    Just curious, what new HTML do you want to add before every <li>? Anything other than an <li> will be invalid HTML.

    what if I want to put PHP code or HTML before every list element???

    you should be able to do this with modifying the register_sidebar() for your theme, or with existing actions or filters;

    http://codex.wordpress.org/Function_Reference/register_sidebar

    or by using filters for the default widgets outputs.

    what exactly are you trying to add where to the output of the widgets?

    @andrew that’s obvious.

    @alchymyth thank you but I took a look at the WP API and it seems I can’t add code to list elements, just before or after the widget or the title.
    What I’m going to add this time is a fontawesome icon so

    <i class="fa fa-icon"></i>

    but it will occur in the future for any different elements for sure

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Customizing twentytwelve sidebar elements’ is closed to new replies.
Skip to toolbar