Requirements

• jQuery
• jQuery Cycle Plugin
• loading.gif (for loading indicator, you can create from http://ajaxload.info/)
• your images

Step 1

Load all needed libraries inside your HTML head tag:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>

Step 2

Create HTML tags for your slideshow:

<!-- For loading indicator -->
<img id="loading-indicator" src="loading.gif" alt="loading" style="display:none;" />

<!-- Your slideshow -->
<div id="myslides">
 <img src="banner1.jpg" alt="banner1" />
 <img src="banner2.jpg" alt="banner2" />
 <img src="banner3.jpg" alt="banner3" />
 <img src="banner4.jpg" alt="banner4" />
</div>

Step 3

Put below JavaSript codes at HTML head and don’t forget to read the code comment:

<script type="text/javascript">
 jQuery(document).ready(function(){
  // Get the slide show container first
  var objSlideshow = jQuery('#myslides');

  // Get slide show container position
  var objPosistion = objSlideshow.position();

  // Create loading interface, to wait the preload
  var objLoading = jQuery('<div></div>').css({
    position: 'absolute',
    top: objPosistion.top,
    left: objPosistion.left,
    width: objSlideshow.width(),
    height: objSlideshow.height(),
    background: 'url("' + jQuery('#loading-indicator').attr('src') + '") center no-repeat'
  }).appendTo(objSlideshow.parent());

  // Hide the slide show container first, to wait the preload finish
  objSlideshow.css('visibility', 'hidden');

  // Do preload, after all images loaded, start the cycle
  var imagesSlideshow = jQuery('img', objSlideshow);
  var totalImages = imagesSlideshow.length;
  var iTotalImage = 0;

  imagesSlideshow.each(function(){
    jQuery('<img />').attr('src', jQuery(this).attr('src')).load(function(){
      iTotalImage++;

      if (totalImages == iTotalImage) {
        // Destroy the loading object
        objLoading.remove();

       // Start the cycle
       objSlideshow.css('visibility', 'visible').cycle({
         fx: 'fade',
         speed: 1000,
         timeout: 4000
      });
    }
  });
});
</script>

Thanks for reading! ^_^

Step 1

Download the CodeIgniter source code from CodeIgniter Official Site and extract it. Now we go into your WordPress default theme folder and create some folder structures :

default/
– ctrl/
—– config/
—– controllers/
—– errors/
—– libraries/
—– models/
—– system/
——– helpers/
——– codeigniter/
——– helpers/
——– libraries/
—– views

Step 2

Copy all needed files from CodeIgniter source code into your previously created folders with this following steps :

• Copy autoload.php, config.php, constants.php, database.php, and routes.php files from system/application/config into default/ctrl/config.
• Copy all files in system/application/errors into default/ctrl/errors.
• Copy all files in system/codeigniter inti default/ctrl/system/codeigniter.
• Copy url_helper.php file from system/helpers into default/ctrl/system/helpers.
• Copy Benchmark.php, Config.php, Controller.php, Exceptions.php, Hooks.php, Input.php, Loader.php, Language.php, Model.php, Output.php, Router.php and URI.php files from system/libraries into default/ctrl/system/libraries.

Step 3

Now we are going to edit and customize the needed files:

default/ctrl/config/autoload.php

Put the url helper into something like this

$autoload['helper'] = array('url');

default/ctrl/config/config.php

Edit your base url into something like this

$config['base_url'] = get_option('siteurl') . '/wp-admin/';

Edit the uri protocol into something like this

$config['uri_protocol']	= "QUERY_STRING";

Enable the query strings into something like this

$config['enable_query_strings'] = TRUE;

default/ctrl/config/database.php

Empty this file and you can use this file later for table installer purpose for your theme.

default/ctrl/config/routes.php

Edit the default controller into something like this

$route['default_controller'] = "noop";

default/ctrl/system/codeigniter/CodeIgniter.php

Put below code on line 29 to make the Output library working

global $BM, $CFG;

Remove the “&” symbol when loading the Benchmark class into something like this

$BM = load_class('Benchmark');

Remove the “&” symbol when loading the Config class into something like this

$CFG = load_class('Config');

Disable CodeIgniter code to check the DB connection into something like this

/*if (class_exists('CI_DB') AND isset($CI->db))
{

	$CI->db->close();
}*/

default/ctrl/system/libraries/Router.php

Change uri string fetched by CodeIgniter by putting below code on line 94

$n_query_string = strpos($this->uri->uri_string, '&');
if ($n_query_string > 0)
{
	$this->uri->uri_string = substr($this->uri->uri_string, 0, $n_query_string);
}
$this->uri->uri_string = '/'.str_replace('page=', '', $this->uri->uri_string);

default/functions.php

Put below code at the end of functions.php file

<?php
/*
|---------------------------------------------------------------
| SYSTEM FOLDER NAME
|---------------------------------------------------------------
|
| NO TRAILING SLASH!
|
*/
	$system_folder = str_replace('\\', '/', dirname(__FILE__)) . "/ctrl/system";

/*
|---------------------------------------------------------------
| APPLICATION FOLDER NAME
|---------------------------------------------------------------
|
| NO TRAILING SLASH!
|
*/
	$application_folder = str_replace('\\', '/', dirname(__FILE__)) . "/ctrl";

/*
|===============================================================
| END OF USER CONFIGURABLE SETTINGS
|===============================================================
*/

/*
|---------------------------------------------------------------
| SET THE SERVER PATH
|---------------------------------------------------------------
|
*/
if (strpos($system_folder, '/') === FALSE)
{
	if (function_exists('realpath') AND @realpath(dirname(__FILE__)) !== FALSE)
	{
		$system_folder = realpath(dirname(__FILE__)).'/'.$system_folder;
	}
}
else
{
	// Swap directory separators to Unix style for consistency
	$system_folder = str_replace("\\", "/", $system_folder);
}

/*
|---------------------------------------------------------------
| DEFINE APPLICATION CONSTANTS
|---------------------------------------------------------------
|
| EXT		- The file extension.  Typically ".php"
| SELF		- The name of THIS file (typically "index.php")
| FCPATH	- The full server path to THIS file
| BASEPATH	- The full server path to the "system" folder
| APPPATH	- The full server path to the "application" folder
|
*/
define('EXT', '.php');
define('SELF', pathinfo(__FILE__, PATHINFO_BASENAME));
define('FCPATH', str_replace(SELF, '', __FILE__));
define('BASEPATH', $system_folder.'/');

if (is_dir($application_folder))
{
	define('APPPATH', $application_folder.'/');
}
else
{
	if ($application_folder == '')
	{
		$application_folder = 'ctrl';
	}

	define('APPPATH', BASEPATH.$application_folder.'/');
}

/*
|---------------------------------------------------------------
| LOAD THE FRONT CONTROLLER
|---------------------------------------------------------------
|
| And away we go...
|
*/

/*
 * ------------------------------------------------------
 *  Load the framework constants
 * ------------------------------------------------------
 */
require_once(APPPATH . 'config/constants' . EXT);

function my_theme_admin()
{
	require_once(ABSPATH . '/wp-admin/includes/plugin' . EXT);

	require_once(APPPATH . 'config/config' . EXT);
	require_once(APPPATH . 'config/database' . EXT);
}

function my_theme_noop()
{
	require_once BASEPATH.'codeigniter/CodeIgniter'.EXT;
}

add_action('admin_menu', 'my_theme_admin');
?>

Now all the CodeIgniter customization are done and you are ready to go to the next step.

Step 4

Now create the theme options menu by editing your ctrl/config/config.php file and put below code on line 2.

/*
|--------------------------------------------------------------------------
| MENU
|--------------------------------------------------------------------------
*/
if (function_exists('add_object_page'))
{
	add_object_page('My Theme Options', 'My Theme Options', 'edit_themes', 'my_theme_controller', 'my_theme_noop');
	add_submenu_page('my_theme_controller', 'Other Options', 'Other Options', 'edit_themes', 'another_theme_controller', 'my_theme_noop');
}

If you refresh your administration panel’s plugin page, you will now see that you have two additional menus on the sidebar.

Step 5

Now you need to create three controller files

noop.php

<?php

class Noop
{

function Noop()
{}

function index()
{}
}

my_theme_controller.php

<?php

class My_theme_controller extends Controller
{

	function My_theme_controller()
	{
		parent::Controller();
	}

	function index()
	{
		echo $this->load->view('my_view', array(
			'the_first_example_variable' => get_option('siteurl'),
			'the_second_example_variable' => 'Oh no, my admin theme panel is working!!! COOL!!!',
			'the_get_querystring' => $this->input->get('page')
		), TRUE);
	}
}

other_theme_controller.php

<?php

class Another_theme_controller extends Controller
{

	function Another_theme_controller()
	{
		parent::Controller();
	}

	function index()
	{
		echo $this->load->view('my_another_view', array(), TRUE);
	}
}

Step 6

Now you need to create two view files

my_view.php

<h3><?php echo $the_second_example_variable; ?></h3>
This is my site url : <?php echo $the_first_example_variable; ?>
<br/>
This is the get querystring : <?php echo $the_get_querystring; ?>

my_another_view.php

<h3>This is my another view</h3>

If you click on your new menu panel, you will see that your controller and view are loaded.

Conclusion

We have now integrate CodeIgniter into your WordPress Options Panel.

Click below link to download the source.

I hope this tutorial gave you all the information you need to integrate CodeIgniter into your WordPress Options Panel. Please feel free to post your comments below.

Thanks for reading! ^_^

This is quite a common issue when we are using the Dojo Pie Chart Widget with Legend and if some of our data are had zero values then the color at the pie slice is different with the needed legend. In here i came up with a simple solution using XHTML JavaScript manipulation to show the right legends color.

Now we start from the beginning of implementing the Dojo Pie Chart.

Before we go through to the code implementation, we should think about the JSON data format. What do i know is we have to create this below JSON format for Dojo Pie Chart:

[
{text:"Lhokga Plant (BU)",stroke:"black",color:"#5D8AA8",y:7},
{text:"Lhoknga Project",stroke:"black",color:"#F0F8FF",y:3},
{text:"Lhoknga Terminal",stroke:"black",color:"#E32636",y:0},
{text:"Belawan Terminal",stroke:"black",color:"#E52B50",y:2},
{text:"Dumai Terminal",stroke:"black",color:"#CD2682",y:0},
{text:"Lhokseumawe Terminal",stroke:"black",color:"#9F2B68",y:0},
{text:"Batam Terminal",stroke:"black",color:"#ED3CCA",y:0}
]

Let me explain a little bit about the above format.

“text” => is the label for pie slice
“stroke” => is the pie slice stroke color
“color” => is the pie slice color
“y” => is the pie slice data number

Then we have to prepare an LotusScript Agent to create an JSON data output, let’s create a simple one.

Sub Initialize
  Print |Content-Type: text/plain|
  Print |[|
  Print |{text:"Lhokga Plant  (BU)",stroke:"black",color:"#5D8AA8",y:7},|
  Print |{text:"Lhoknga  Project",stroke:"black",color:"#F0F8FF",y:3},|
  Print |{text:"Lhoknga  Terminal",stroke:"black",color:"#E32636",y:0},|
  Print |{text:"Belawan  Terminal",stroke:"black",color:"#E52B50",y:2},|
  Print |{text:"Dumai  Terminal",stroke:"black",color:"#CD2682",y:0},|
  Print |{text:"Lhokseumawe  Terminal",stroke:"black",color:"#9F2B68",y:0},|
  Print |{text:"Batam  Terminal",stroke:"black",color:"#ED3CCA",y:0}|
  Print |]|
End Sub

Then you have to place needed HTML code container on your HTML page

<div id="chart_data" style="width: 800px; height: 200px;"></div>
  <div class="legend_list right">
    <div class="legend_example">
      <div class="left">&nbsp;</div>
      <label class="legend_text left"></label>
      <div style="clear:both;"></div>
  </div>
</div>

Then we put the JavaScript code

dojo.addOnLoad(function() {
  dojo.addClass(dojo.body(), "soria");

  dojo.xhrPost({
    url:  "http://domain.com/database.nsf/dataAgent?OpenAgent&ur=" + new Date().getMilliseconds(),
    handleAs: "json",
    error: function(response, ioArgs){
      if (ioArgs.xhr.status != 200) {
        console.error("HTTP status code: ", ioArgs.xhr.status);
      }
    },
    load: function(response, ioArgs){
      if (response.length > 0) {
        dojo.require("dojox.charting.plot2d.Pie");
        dojo.require("dojox.charting.themes.MiamiNice");

        var chart = new dojox.charting.Chart2D("chart_data");
        chart.setTheme(dojox.charting.themes.MiamiNice).addPlot("default", {
          type: "Pie",
          radius: 150,
          precision: 0
        }).addSeries("Series A", response);
        chart.render();

        var i_item = 0;
        var item = {};
        for(i_item in response) {
          item = dojo.clone(dojo.query(".legend_example"));
          item.removeClass("legend_example");
          item.addClass("legend");
          item.removeClass("hidden");
          item.query("div.left").style({backgroundColor: response[i_item].color});
          item.query(".legend_text").addContent(response[i_item].text + " <strong>(" + response[i_item].y + ")</strong>");
          dojo.place(item[0], dojo.byId("legend_list"), "last");
        }

        delete i_item;
        delete item;
        delete chart;
      }
    }
  });
});

Hope this tips will be very helpfull for Lotus Domino Developer who want to integrate the Dojo Toolkit especially for the Pie Chart.

*Before running any of those above code, please replace all the double quote with your own.

Features :

* Select Pages and Categories as your menu

* Create new custom menu

* Manage menu structure

* Dropdown tree menu

* If you want to customize the styles/menu-manager.css stylesheet, you can place it in your active theme folder, and Menu Manager will find it there (that way you won’t lose your stylesheet customizations when upgrading Menu Manager).

Installation :

Download the zip file, unzip it, and copy the “menu-manager” folder to your plugins directory. Then activate it from your plugin panel. After successful activation, Menu Manager will appear under your “Settings” tab.

Before you can use Menu Manager, you need to fill out its Settings form.

After you manage the menu, then you can put below code into your blog :

<ul id="mm_nav" class="sf-menu">
<?php if (function_exists("mm_menu")) { mm_menu(); } ?>
</ul>

Changelog :

= 1.0.3 =
* change the dropdown using superfish, please read again the documentation for placing the menu manager plugin html tag
* show the parent page title on the admin panel
* re-positioning the admin panel layout
* fix some bugs “oh i forgot which bugs”

= 1.0.2 =
* change plugin url

= 1.0.1 =
* fix deactive

= 1.0.0 =
* initial release

Please kindly give me a feedback about the plugin for next release ^_^.

As you are using my plugin and if does not hurting anybody, please kindly support my plugin using this donation button as you can afford.

and you can Download it here.

User Link Feed enables user blog to contribute link feeds include an image fetched for the link.

Title, Description, and Images are fetched directly from the link source in realtime.

The user interaction when contribute the link is like facebook link share, user can choose which images to be use that fetched.

User Link Feed List

User Link Feed Form

User Link Feed Options Panel

User Link Feed Plugin Admin Panel

User Link Feed Sidebar Widget

Features :

* Fetch Title, Description, and Images directly from the link source in realtime.

* User choose image to be use.

* reCaptcha for blocking spam.

* Feed List Sidebar Widget

* Pagination Feed List.

* Specify number of feed to display per page.

* Enable / Disable unregistered user to submit a link feed.

* Feed List on Admin panel using Wordpres Default Grid View.

* Sort Feed List by All/New/Approved on Admin panel.

* Pagination Feed List on Admin Panel.

* Admin Approval.

* Delete Feed on Admin Panel.

* If you want to customize the user-link-feed.css stylesheet, you can place it in your active theme folder, and User Link Feed will find it there (that way you won’t lose your stylesheet customizations when upgrading User Link Feed).

Installation :

Download the zip file, unzip it, and copy the “user-link-feed” folder to your plugins directory. Then activate it from your plugin panel. After successful activation, User Link Feed will appear under your “Settings” tab. Note that User Link Feed requires WordPress 2.5 or higher.

Usage Guide :

Before you can use User Link Feed, you need to fill out its Settings form. First, you will need a reCAPTCHA API key. If you are already using the WP-reCAPTCHA comments plugin, then you don’t need another key (you’ll see the form is pre-filled with your existing key). If you’re not using WP-reCAPTCHA, then follow the link on the Settings form to get a key. Then the only other requirement is that you provide the email address where you’d like the form submissions to go. All the other settings include comments explaining what they do.

Putting User Link Feed on a page ?

Just put the shortcode tag:

userlinkfeed

Putting User Link Feed Form on a page ?

Just put the shortcode tag:

userlinkfeedform

on a page, and that’s where the User Link Feed will appear.

That’s all ^_^

README

Changelog :

= 1.2.1 =

* Fetch from meta description if not found in body

= 1.2.0 =

* Fetch Title, Description, and Images directly from the link source in realtime.

* User choose image to be use.

= 1.1.2 =

* add new 5 feed list dashboard widget

* fix url existance checking

= 1.1.1 =

* fix getting 404 when user is not logged in

* add feed icon on feed list

* add xml feed format

= 1.1.0 =

* separate shortcode tag for userlinkfeed (feed list) and userlinkfeedform (feed form)

* add sidebar widget for feed list

* add url existance checking

Download here.

Please kindly give me a feedback about the plugin for next release ^_^.

Majalahku

Sekarang kita akan membahas fasilitas dari admin panel yang disediakan oleh Theme Majalahku buatan iCreativelabs

General Settings

Bagian opsi keseluruhan adalah opsi – opsi yang tidak masuk kedalam kategori lain. Disini Anda akan menemukan opsi standar yang sudah biasa dipakai, seperti fasilitas untuk mengganti corak, mengaktifkan gravatar, mengganti logo dengan memasukan url dari logo yang akan dipakai dan text alternative, memasang kode google analytics yang otomatis akan diaktifkan pada setiap halaman blog jika kode sudah terisi, bahkan Anda dapat mendefinisikan nama custom field yang akan dipakai untuk menyimpan url dari gambar kecil blog post, juga mendefinisikan maksimal komentar yang akan muncul per-halaman pada blog post.

Main Menu (next release v.1.1.x)

Pada bagian ini Anda dapat mengolah menu utama yang bersumber pada 3 (tiga) hal, yaitu: Page, Category, dan Custom. Halaman – halaman dan Kategori yang sudah Anda buat pada wordpress dapat dipilih pada bagian ini untuk mendefinisikan bahwa pilihan tersebut akan muncul sebagai menu utama di blog.  Custom di tujukan jika ingin mempunyai menu yang mengarah kepada halaman atau website lain.

Menu Structure (next release v.1.1.x)

Saya menyediakan bagian ini supaya memudahkan dalam menyusun daftar menu yang sudah dipilih pada Bagian Menu Utama (Main Menu). Tujuan sebenarnya adalah Anda dapat membuat struktur menu seperti cabang pohon yang tidak terbatas. Pembuatan menu seperti cabang pohon dapat dilakukan dengan sangat mudah, yaitu tinggal melakukan drag and drop, drag nama menu dalam kotak merah dan jatuhkan pada kotak yang bertuliskan “drop to this box”. Untuk urutan dari menu tinggal mengisi nomor posisi pada tiap menu sesuai dengan posisi menu tersebut di luar atau didalam menu yang lain.

Share Post

Anda dapat mengaktifkan fasilitas berbagi untuk halaman blog post. Website social networking yang dapat digunakan untuk berbagi yaitu: Feedburner, Delicious, Twitter, dan Facebook.

Featured Posts

Pada bagian ini Anda dapat memilih post – post yang akan ditampilkan sebagai post utama pada halaman utama dari blog, bahkan Anda dapat mendefinisikan nama custom field yang akan dipakai untuk menyimpan url dari gambar kecil post – post tersebut untuk bagian Featured Posts.

Resource

Sebenarnya resource berfungsi untuk menampilkan post – post pada sebuah kategori atau tag yang dianggap perlu ditampilkan pada halaman depan dari blog. Disini Anda dapat mendefinisikan judulnya dan kemudian sumbernya berasal dari kategori atau tag, kemudian memilih kategori atau tag yang akan dipakai, pengurutan, maksimal jumlah post yang akan tampil, juga nama custom field yang akan dipakai untuk menyimpan url dari gambar kecil post – post yang akan tampil.

Sidebar

Fungsi dari bagian Sidebar tidak berbeda jauh dengan General Settings, hanya disini Anda akan mengisi url – url dan alamat halaman – halaman yang dibutuhkan pada sidebar.

Footer

Fungsi dari bagian Footer juga tidak berbeda jauh dengan Sidebar, hanya disini Anda akan mengisi beberapa teks keperluan dari footer dan copyright dari blog.

Advertisement

Bagian advertisement berfungsi sebagai tempat untuk mengisi script atau url yang akan muncul sebagai iklan pada blog. Iklan – iklan tersebut akan muncul pada 3 tempat, yaitu: header sebelah kanan logo, sidebar, dan dibawah blog post sebelum dan sesudah daftar komentar.

untuk demo Anda dapat mengunjungi disini.

Review saya mungkin belum jelas, silahkan Anda mencoba langsung theme tersebut supaya lebih terbukti fungsionalitas nya ^_^ *go indonesia wordpress theme*