How to add custom widget to WordPress

Adding widgets to your wordpress site is very simple and super easy. Which means that you can now customize the display of widgets on your wordpress site. WordPress widgets enable users to simply drag and drop elements into their site, and in this simple tutorial i will show you how to simply add custom widgets

First, add this codes to functions.php

if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Custom Widgets',
'id' => 'custom-widgets',
'description' => 'The Custom widgets for your website.',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}

Second, add the codes below to which the area you want the widget to display (eg. header.php)

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Custom Widgets')) : 
endif; ?>

And that’s it, just navigate to your wordpress admin Appearance>>Widgets and you can see the Custom Widgets title on the dashboard.

How to display code snippet on wordpress blog

I found this best plugin that could be used for displaying code snippet into a wordpress blog. This is suitable for bloggers who are adding programming tutorials to their site. And so i recommend

Syntax Highlighter Evolved

Syntax Highlighter Evolved allows you to easily post syntax-highlighted code to your site without having to modify the code at all. It uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev to do the highlighting and supports all of the package’s parameters via shortcode attributes.

How to add Color Theme option on J2.5 templates

In this tutorial i will explain on how to add color theme option on your joomla 2.5 templates by adding fields on template parameters.

In your templateDetails.xml, paste this codes

<fieldset name="COLOR">    <field name="theme" type="list" default="Default" label="Color Theme" description="Choose Color theme from list">
    <option value="default.css">Default</option>
    <option value="red.css">Red</option>
    <option value="blue.css">Blue</option>
    </field>
</fieldset>

And then on index.php file, you will need to call this param function, paste this codes at the top of your index.php page, inside the php

$templateparams = $app-&gt;getTemplate(true)-&gt;params;

and in order for the css code to function call it through adding this code inside the head tag

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/colortheme/<?php echo $this->params->get( 'theme' ) ?>" type="text/css" />

Please note that you will need to add different color style on each css files that been added, for it to take an effect and to select the color theme, you have to login to your administrator and on template manager select your template and you must see the color theme option at the right side area.

Hope this helps.

Scroll To Top