Some simple notes about widgetizing a theme

  • roadie

    (@roadie)


    13 years, 8 months ago

    I followed the advice in http://codex.wordpress.org/Widgetizing_Themes but found the text a little confusing. So I thought I would write some notes about what I found out when I made a theme widget aware.

    I am using a customised version of theme neo-sapien version 0.6 which was not widget aware. It did not have a functions.php file in its theme folder (that’s /var/www/wordpress/wp-content/themes/neo-sapien-dev on my computer), so I copied the one from the Classic theme.

    Amongst other things, that contains the code

    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    In wp-admin -> Appearance -> Widgets, widgets are now enabled, so I added a text widget to the sidebar, put some stuff in it and saved it.

    (As expected, nothing yet appears on the site.)

    I added

    <?php if ( !function_exists(‘dynamic_sidebar’)
    || !dynamic_sidebar() ) : ?>
    <?php endif; ?>

    into my php code and saved it.

    (On refreshing the web page of the site, the widget appears.)

    It does not matter where you put it, widget(s) appear at that place.

    If you put it in more than once, the same widget(s) appear more than once.

    You can omit the static alternative to the dynamic widgets.

    If you want more than one widget area, edit functions.php to use the simpler version described in the codex, e.g.:

    if ( function_exists(‘register_sidebars’) )
    register_sidebars(2);

    If you put the same call to e.g. dynamic_sidebar(1) more than once, the same widget(s) appear more than once.

    More usual is to have dynamic_sidebar(1) in one place and dynamic_sidebar(2) in another.

Viewing 15 replies - 1 through 15 (of 20 total)
1 2
  • jwk1230

    (@jwk1230)

    13 years, 8 months ago

    I am trying to widgetize this same theme.
    Where did you add the following code?

    <?php if ( !function_exists(‘dynamic_sidebar’)
    || !dynamic_sidebar() ) : ?>
    <?php endif; ?>

    I still don’t see my widgets showing up.

    I thank you in advance for your help!

    Thread Starter roadie

    (@roadie)

    13 years, 8 months ago

    @jwk120

    In sidebar.php

    Did you do the other things needed?

    toddhalfpenny

    (@toddhalfpenny)

    13 years, 8 months ago

    The Widgets on Pages plugin can be used to simplify this process. It enables the addition/naming/registration of the sidebars via the Admin screen and the sidebars can be called in the theme’s PHP pages via the use of simple template tags.

    jwk1230

    (@jwk1230)

    13 years, 8 months ago

    can you tell this is my first time with WordPress. I’m a noob. Sorry!

    Thread Starter roadie

    (@roadie)

    13 years, 8 months ago

    @jwk1230

    I guess so, from those blank message I can see 😉

    How are you getting on? Did you succeed in editing the php file(s)?

    jwk1230

    (@jwk1230)

    13 years, 8 months ago

    Well, I ended up using the WoP plugin that @todd recommended. It worked really well. Only problem I have now is that when I post pictures to an article I can’t get them to line up centered, which is irritating.

    Thanks both of you for your suggestions and help!

    toddhalfpenny

    (@toddhalfpenny)

    13 years, 8 months ago

    Glad you found the plugin useful jwk1230… do you have a link to a page with the image issue so we can take a look?

    Digital Raindrops

    (@adeptris)

    13 years, 8 months ago

    If you have spare time and prefer to learn, these tutorials may help!

    They take you through using the latest wordpress with a twenty ten child theme, from getting started to adding two menu’s, smooth slider, four sidebars, ctrating many template pages and four content widgets.

    http://digitalraindrops.net/templates/

    David

    jwk1230

    (@jwk1230)

    13 years, 8 months ago

    Thanks Todd…my blog is at http://www.sooperpowertv.com. Notice how the photo in the article is off center.

    David, thanks for the info! I will definitely take a look!

    jwk1230

    (@jwk1230)

    13 years, 8 months ago

    Do those tutorials cover anything regarding browser differences? I’m having issues with how the blog looks in IE versus Chrome or Firefox.
    For example, the twitter icon doesn’t show up in IE, but it does in Chrome/FF. And for some reason my header image looks “fuzzy” in IE but not the other two.

    Digital Raindrops

    (@adeptris)

    13 years, 8 months ago

    Hi jwk1230,
    If the twitter icon is not showing in IE but is in the other browsers then it is likely a syntax error, invalid character or missing a closing tag, IE is more sensitive to these that FF.

    General comment for anyone not using these tools:
    Run your url through the html and css validators, in FireFox load the Addons ‘Web Developer Toolbar’ and ‘FireBug’, then with the WDT tools ‘Validate HTML’ and ‘Validate CSS’, use FireBug to view the different parts of the page, CTRL+F5 will open FireBug in a new window then click on the html tab to see elements and css.

    YouTube FireBug

    Or you can validate your website here: http://validator.w3.org/

    Not sure why the header would look fuzzy though.

    David

    Thread Starter roadie

    (@roadie)

    13 years, 8 months ago

    And for some reason my header image looks “fuzzy” in IE but not the other two.

    Your header image is 592 by 258 pixels but your html is resizing it to fit in the 500 pixel width of “.narrowcolumn”:

    <img src=”http://www.sooperpowertv.com/wp-content/themes/neo-sapien-v06/images/main.jpg&#8221; width=”480″ height=”250″ alt=”Header” />

    I wonder if that could be the reason? You could try resizing it in something like Photoshop first to see if it gets rid of the fuzziness.

    Only problem I have now is that when I post pictures to an article I can’t get them to line up centered, which is irritating.

    Not sure about this one at all, but I notice that the ones that look wrong are being “widthed” to close to the width of the column. Also try removing the “[caption]” code from the post.

    Good luck.

    jwk1230

    (@jwk1230)

    13 years, 8 months ago

    Any idea what would make a theme view just fine in Chrome/Firefox but not Internet Explorer? I wish Microsoft would implode.

    drew10

    (@drew10)

    13 years, 5 months ago

    Hi Everyone,

    I am a new user to wp.org having recently started moving over from wp.com. Can anyone explain why Neo-sapien has loads of widgets in the .com version but none in the .org version?

    Thanks,

    Drew.

    drew10

    (@drew10)

    13 years, 5 months ago

    For example: the version I have on WP.com has 3 side bars and widgets including, ‘image’ and I cannot seem to find that widget anywhere. Help!

Viewing 15 replies - 1 through 15 (of 20 total)
1 2
  • The topic ‘Some simple notes about widgetizing a theme’ is closed to new replies.