WordPress.org

Forums

Customizing twentytwelve sidebar elements (14 posts)

  1. lup0z
    Member
    Posted 8 months ago #

    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!

  2. vtxyzzy
    Member
    Posted 8 months ago #

    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.

  3. lup0z
    Member
    Posted 8 months ago #

    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

  4. vtxyzzy
    Member
    Posted 8 months ago #

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

  5. lup0z
    Member
    Posted 8 months ago #

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

  6. vtxyzzy
    Member
    Posted 8 months ago #

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

  7. lup0z
    Member
    Posted 8 months ago #

    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!

  8. vtxyzzy
    Member
    Posted 8 months ago #

    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.

  9. lup0z
    Member
    Posted 8 months ago #

    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; ?>
  10. vtxyzzy
    Member
    Posted 8 months ago #

    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.

  11. lup0z
    Member
    Posted 7 months ago #

    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.

  12. Andrew
    Forum moderator
    Posted 7 months ago #

    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.

  13. alchymyth
    Forum Moderator
    Posted 7 months ago #

    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?

  14. lup0z
    Member
    Posted 7 months ago #

    @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

Reply

You must log in to post.

About this Topic