Entries Tagged as 'Customize Wordpress'

Fix WordPress Sidebar Widgets That Don’t Work

You may have come across a cool theme that you really want to use on your but it might need just a bit of tweaking to make it standout or, in some cases work correctly. In this example what to do if your new themes widgets aren’t working.

This post is taken from the “Ask Max” page where I try to answer your questions about WordPress. First off I ask those posting questions on that page to not get too technical or into things such as template coding and things of that nature. And in this case the question actually wasn’t of that nature but the answer is.

Here is the Question:

When I try to customize the sidebars, nothing changes! No matter how I drag and drop widgets on them, they always look the same with same default categories & archives on the left and calendar blogroll, and meta on the left. Any idea why that is? Thanks.

After looking at the theme, jd-nebula-3c 1.0, and dealing with the arrogance on a certain forum that is supposed to help people with their , I figured out what the problem with theme is.

The are not working on this theme meaning that moving them around in the dashboard didn’t register a change on the blog itself. The first issue with this two sidebar theme was the functions.php file. so lets fix that first and without going into an in-depth explanation I am just going to show you the proper code to use in your functions.php file.

Warning! Before you change any code in your themes template files create a backup so you can restore it if it doesn’t work for you!

Below is the code needed in the functions.php file to use for a two sidebar theme. It basically says to get sidebar1 and sidebar2 if they exist. Replace the all the code in your functions.php file with this:

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(’name’=>’sidebar1′,
‘before_widget’ => ‘<div id=”%1$s” class=”side-c %2$s”>’, // Removes <li>
‘after_widget’ => ‘</div>’, // Removes </li>
‘before_title’ => ‘<h3>’, // Replaces <h2>
‘after_title’ => ‘</h3>’, // Replaces </h2>
));
register_sidebar(array(’name’=>’sidebar2′,
‘before_widget’ => ‘<div id=”%1$s” class=”side-c %2$s”>’, // Removes <li>
‘after_widget’ => ‘</div>’, // Removes </li>
‘before_title’ => ‘<h3>’, // Replaces <h2>
‘after_title’ => ‘</h3>’, // Replaces </h2>
));

?>

Next the sidebar file in this particular theme was calling up two sidebars that the functions.php file didn’t know about. We just fixed the functions.php file above and now we need to add the proper code in the sidebar.php file. Open your sidebar.php file and look for these two areas of text, the red text is the problem that needs addressed:

This is for the left sidebar:

<div id=”left-sidebar”>

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar(’Sidebar_1′) ) : else : ?>

<div id=”categories”>

And a little further down is the right sidebar:

<div id=”right-sidebar”>
<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar(’Sidebar_2′) ) : else : ?>

You can see that these are calling for Sidebar_1 and Sidebar_2 but again the functions.php file had no reference to them. So now replace the red text in your sidebar.php file with this code:

For the left sidebar use this:

<div id=”left-sidebar”>

<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar(’sidebar1′) ) : ?>

And for the right sidebar use this:

<div id=”right-sidebar”>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar(’sidebar2′) ) : ?>

This is the fix for WordPress sidebar widgets that don’t work on the particular theme mentioned above. It may work on other but I offer no guarantees.

If you need help customizing or fixing your WordPress blog post a comment or click here to send me an email, you will find my fees are very reasonable.



Share This AddThis Social Bookmark Button Sphinn Gregarious FeedFlare

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!


Tagged with ,


Related Posts



Add Background Color To Single Page Sidebar On Default WordPress Theme

Wow is that title long enough for you? I searched for the answer to this for hours and what seems like second nature to the geeks actually drove me nuts! I explain how to add the sidebar to a single page in this related post, Adding The Sidebar To The WordPress Page Or Single Post Template. In that I explain how to add the sidebar to the single post page of the . What is missing from that are instructions for getting the single post page to show the light gray background on the sidebar that is shown on the main index page.

So here we are going to further to get everything looking uniform throughout the entire blog using the .

First you need to be able to either edit the themes files through the or edit them from your hosting accounts control panel. To edit the themes files in the dashboard they need the proper file permissions set, I explain how to change the file permissions in this related post: Adding The Sidebar To The WordPress Page Or Single Post Template.

From the WordPress dashboard go to Presentation, Theme Editor. Click on Header on the right side and the header.php file will be visible in the editor. Warning if you are not experienced with editing these files copy all the text in here and paste it into Wordpad or Notepad and save a copy of it on your computer.

The WordPress default theme was written to not show the sidebar on the single post page. Because of that it specifies one background image for the main index that shows the gray background in the sidebar. And another image for the single post page with no background in the sidebar area. The version of the default theme you have determines what image background to use. But don’t worry you will see what image to use right within your header.php file.

With the header.php file open scroll down and look for the code that looks like this for older versions of the theme:

#page { background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbg.jpg“) repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbgwide.jpg“) repeat-y top; border: none; }
<?php } ?>

</style>

Or like this for newer versions:

#page { background: url(”<?php bloginfo(’stylesheet_directory’);

?>/images/kubrickbg-<?php bloginfo(’text_direction’); ?>.jpg”) repeat-y top; border:

none; }
<?php } else { // No sidebar ?>
#page { background: url(”<?php bloginfo(’stylesheet_directory’);

?>/images/kubrickbgwide.jpg”) repeat-y top; border: none; }
<?php } ?>

</style>

The first instance of the red text is specifying the background image to use on the a page that has no sidebar, again it depends on what version of the theme you are using as to what you are going to see in your header.php file. Now all you need to do is copy the code from the top and replace it with the code on the bottom like this:

#page { background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbg.jpg“) repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbg.jpg“) repeat-y top; border: none; }
<?php } ?>

</style>

Or like this for newer versions:

#page { background: url(”<?php bloginfo(’stylesheet_directory’);

?>/images/kubrickbg-<?php bloginfo(’text_direction’); ?>.jpg”) repeat-y top; border:

none; }
<?php } else { // No sidebar ?>
#page { background: url(”<?php bloginfo(’stylesheet_directory’);

?>/images/kubrickbg-<?php bloginfo(’text_direction’); ?>.jpg”) repeat-y top; border: none; }
<?php } ?>

</style>

Click Update File and check out your blog to make sure you did it correctly. If your is all messed up just paste the code back in from the backup file you made. And don’t blame me if you didn’t make a backup of the files, I warned you twice!



Share This AddThis Social Bookmark Button Sphinn Gregarious FeedFlare

Tagged with , ,


Related Posts



Change WordPress Default Theme Header Colors

Changing The Default Themes Header Color WordPress Guide

The default theme is probably the most popular and the base of many other themes that have been created after it. Changing the color of the default header is a way to keep a simple uncluttered look yet making it stand out and look different.

To change the header colors of the default theme click Presentation and then the Header Image and Color subpanel.

head1.gif

There are five options as shown below in this subpanel.

head2.gif
The gradient header is and made up of three colors, font, upper and lower. Clicking the corresponding tabs to choose a color can easily change these colors. Click Revert to change it back to the default blue color.

The Advanced tab allows for even more fine-tuning by specifying a hex color code. To find a hex color code you can Google hex colors and find the codes for the colors you want or go to this Hex Color Code Generator site and use the hex color code generator.

After you find the hex color code you want simply copy and paste it into the corresponding areas in the Advanced tab and click Update Header.

head31.gif

View your site to see if you like the new look, if not just go back and keep trying.

Changing the header colors of the default is an easy way to customize without going through the hassle of searching for new and different themes.



Share This AddThis Social Bookmark Button Sphinn Gregarious FeedFlare

Tagged with ,


Related Posts



Working With WordPress Text Widgets


Adding additional WordPress text widgets and what to do when you need more.

This post is for WordPress prior to version 2.5. The widget menu has changed with 2.5 and a new guide is posted here: WordPress 2.5 Sidebar Widgets Guide

The easiest way to is working with WordPress widgets. Adding items to your sidebar and moving them into the order you want is easily accomplished by simply dragging and dropping. You can also add anything you want including HTML code into a text widget.

Widgets have been integrated into WordPress since Version 2.2.1 if you have an earlier version of WordPress and don’t want to upgrade you can grab the Sidebar widgets plugin to accomplish the same thing. Keep in mind that not all are “Widget Ready” so if you don’t see the widget option in your dashboard then you will need to Widgetize your theme.

To get started, from within the dashboard click Presentation then Widgets. The default sidebar will show until you drag a new widget from the Available Widget area into the Sidebar area.


wdg1.gif

The list of available widgets that can be dragged into the sidebar are pretty self explanatory. Simply drag the available widgets you want to show in the sidebar and drop them into place above. You can also order them however you wish by dragging them into position.

Text widgets are the most flexible and can be used to add more items to your sidebar. To add more text widgets to your , scroll down to Text Widgets, click the drop down box to add more text widgets and click Save.

wdg21.gif


Drag your text widget from the Available Widgets area up to the sidebar.

wdg32.gif

Drop the widget into the sidebar.

wdg10.gif

Click the blue text box next to the text widget to open it. If you don’t see the open widget, scroll up a bit, it may not be visible in your viewing area.

wdg4.gif

Here is where the power and flexibility of WordPress really shines. The top box is for the optional title and only text can be placed in there. You can add anything you want into the bottom box of a text widget. Including HTML code, Google AdSense code, Banner ad HTML code, links… The possibilities are endless.

But what if you run out of the 9 available text widgets? Well just add more to another text widget. Oh you want the title to show too? OK here is a little trick to add a title in the middle of a text widget. Just use the code in the body of a text widget shown below and the text will show like a widget title. Then place your new code below the title tags. This one widget will show on your sidebar like two .

<h2 class=”widgettitle”>Create What Looks Like A New Title Here</h2><br>

wdg51.gif

Create your new widget, click the X on the top right of the widget to close it and click save changes.

wdg71.gif

Now view your site and admire your handy work, and remember if the girls don’t find you handsome, they should at least find you handy!

wdg81.gif

WordPress sidebar widgets are very flexible, easy to work with and allow you to make changes to your entire blog with just a few clicks of the mouse.

Always make sure your HTML tags are closed and you are not trying to put very large items into the sidebar!

Questions and comments are always welcome.



Share This AddThis Social Bookmark Button Sphinn Gregarious FeedFlare

Tagged with ,


Related Posts



Add Link To A Custom WordPress Footer

One of the easiest ways to is to add links to the footer of the themes template. You could add the link to any website you want and if your blog is part of your website adding a link to the homepage of your site will help your search engine rankings as well. This is a little that will help interlink your website.

First make sure you can edit your theme’s footer.php file by making in writable in your hosting account. Login to your hosting account, browse to your blogs folder, the wp-content folder and then the themes folder. Look for your current theme and open that folder. Change the file permissions to at least the footer.php file to 777 or 666.

Login to your blog, click Presentation, then Theme Editor, look for the Footer file on the right and click it to open it in the editor. First copy all the content in this file and save it as a text file in Notepad on your computer. That way if you mess things up you can just paste the original code back in to start over.

Now look for the links that are already in place, for the default theme that will look like this:

<?php bloginfo(’name’); ?> is proudly powered by
<a href=”http://wordpress.org/”>WordPress</a>

We want to add a link right after this code, Place your mouse right after the original code and hit the space bar once and add your new link code. Or you could just copy the original code and paste it right after it and then edit the URL, the anchor text and even place some text in front of it like this:

<a href=”http://wordpress.org/”>WordPress</a> More Optional Text <a href=”http://YourWebsite.com”>Anchor Text</a>

Now Click Update File, open your site and marvel at your handy work!
If you are using a free theme that someone wrote and it has a link to their website in it please leave the link intact. After all that is a small price to pay for what they have provided you.

Questions or comments are always welcome, please leave them below and I will try to answer all of them.



Share This AddThis Social Bookmark Button Sphinn Gregarious FeedFlare

Tagged with , ,


Related Posts



WordPress First Full Post Remainder As Excerpts

As the title states I have been trying to and messing with my themes template to get the main blog page to show the entire latest post and the rest as only excerpts. Digging through the WordPress.org forums I found just enough information to really make a mess of my blog. I also noticed that the question was asked a few times over there and well… lets just say the response was a bit condescending. Like the answer was so simple that if you had to ask you didn’t deserve to even be on the forum.

As I was researching something completely unrelated I came across Dane Morgan’s Blog Strokes. I noticed that he was displaying his main page exactly how I wanted to show mine. So I sent Dane an email asking how he was showing the latest full post and the remainder as excerpts.

Dane not only answered my email but then went as far as creating a new post: How To Mix Full Posts And Excerpts On Your WordPress Home Page . His instructions not only explained how to do it but also provided the actual PHP code to do it.

It did take a little trial and error on my part to implement it and the results can now be seen on the WordPress Max home page. If you are going to do this I suggest that you add your own excerpts when writing posts to control what is show under the tilte of the post on the main blog page.

The file that needs changed is index.php and since Dane helped me with this you will need to go to Blog Strokes to learn more.

Thanks again Dane!



Share This AddThis Social Bookmark Button Sphinn Gregarious FeedFlare

Tagged with


Related Posts



How To Create A Custom WordPress Page Template

There may be times when you want to create a blog page or that looks different than a normal page. Or Perhaps you want to use to run your entire website but want the main page of your domain to look completely different than a typical blog. This is an easy way to that can be very easily accomplished by creating a custom WordPress page Template.

The first step is to create your desired page in HTML, I use an HTML editor since I am somewhat geek impaired and can’t actually write any code. In this case we are not going to add content to this page from within the dashboard so add all your meta tags for SEO. It will need a title, description, keywords, basically everything a regular static HTML page would need. After you create your new page you need to create a new . This can be done either in a text editor and FTP uploaded to your site or, since it is a small simple file you can create it directly in your hosting account’s control panel.

To create the new page template paste the HTML code into a text editor like Notepad, then paste the following PHP code directly above the opening <html> tag like this.

<?php
/*
Template Name: NewTemplateName

*/
?>

<html>

Copy just the 5 lines of code above the <html> tag (don’t include <html> twice), paste it into your new template and change NewTemplateName to a name of your choosing. Save the new page template as a .php file. Something like front.php, and upload it to your hosting account in the template folder of your current WordPress theme. Don’t call your new template page.php! There is already one called that. In fact look in the themes directory to see what files exist to not create a duplicate.

The directory to place the new page template in is blog/wp-content/themes/default. Where default is the currently active theme.

Since you are placing this new [tag]WordPress[tag] page template into a specific themes folder it will only be available when that specific theme is active. If you change themes you will need to place a copy of it into the currently active theme.

To create a new page template within your hosting accounts control panel. Browse to your blogs main directory, wp-content, themes, then click on your currently active theme. Create a new PHP file, call it whatever you wish, like above front.php, paste your HTML code and then the PHP code directly above it and save.

Creating Your New Custom Page

Login to your WordPress Dashboard, click Write then Write Page. Since we didn’t specify in the custom page template to get the content, or any other information for that matter, all we need to do here is create a new page and specify the page template to use.

Type a title in the title box, then look over to the right and click the Page Template drop down box, choose your new WordPress page template and click publish.

Using A Custom Static Front Page

If you want to use a your new custom page for a static front page you will first need to create another regular page as a URL as your blogs Posts Page . Create a new page and give it the title blog, or anything you want. Again don’t bother writing any content, on the right side type the same name as the title in the Post Slug box and click publish.

To specify using a static front page, click Options then the Reading subpanel. Choose the Static Page option, specify your new custom page as the front page and the newly created blog page as the Posts Page and click Update Options.

Now your blog will show your new custom page as the front page. But what about your blog? Where did it go? If you followed my directions and used blog as the the Posts Page the URL should be YourBlogsURL.com/blog so if your blog is in a directory called blog then the URL will be YourBlogsURL.com/blog/blog. Having a blog/blog URL isn’t all that cool huh? Well this is intended for use on a website ran entirely on WordPress without a static HTML front page. But you can use a different name in the title and Post Slug when you create the new Posts Page.

Now that your have read the entire post here is a short video to explain it.

For more technical information about this subject.

WordPress Pages

Another post on my other blog about Using A Static Front Page For WordPress



Share This AddThis Social Bookmark Button Sphinn Gregarious FeedFlare

Tagged with , ,


Related Posts



WordPress Custom Permalink Structure

The very first thing to do after installing is to create a . A will make your blog more SEO friendly and turn those ugly URL’s into Google bait!

Follow these very simple steps for a more SEO friendly WordPress blog URL structure.

From within the WordPress dashboard, click on Options, then Permalinks.

You will then see the following options:

Default
» http://www.wordpressmax.com/?p=123

Date and name based
» http://www.wordpressmax.com/2007/05/29/sample-post/

Numeric
» http://www.wordpressmax.com/archives/123

Custom, specify below
» Custom structure

Paste the following code in the Custom structure box:

/%category%/%postname%

This is the custom Permalink structure I use and recommend. It will change the post page URL to http://www.wordpressmax.com/category/PostTitle

If your post title is too long another you should create a post slug when writing your post

If the title of your post is too long you can shorten it in the write post screen using a shorter but relevant Post Slug found on the right side of the Write Post box just under the Post Password box.

Warning - If you have an existing changing the URL structure will lose many of your incoming links. If you want to change your Permalink structure on an existing blog there are that will help like Permalink Redirect.

Check out more about custom Permalink structure here: Wordpress.org/Using_Permalinks

With a good SEO friendly category and post title your chances of ranking higher in the search engines will increase.



Share This AddThis Social Bookmark Button Sphinn Gregarious FeedFlare

Tagged with , ,


Related Posts



Close
E-mail It