Showing posts with label wordpress. Show all posts
Showing posts with label wordpress. Show all posts

Monday, March 4, 2013

[Wordpress][Tutorial] Installing wordpress mu must use plugins with image and example

Mu-plugins, are plugins located at wp-content/mu-plugin folder, and it’s also known as “Must Use plugin”. At usual, it was used for the wordpress multisite version.
About the reason why using mu-plugins is cos it can be automatically enabled on all sites in the installation and the Must-use plugins do not show in the default list of plugins on the Plugins page of wp-admin.

The steps to install Must-use plugin is really easy, you just need to move the source code to the plugin is already okay.

Now I would use my localhost be an example:

Step 1)
Create a folder named “mu-plugins” in your “wp-content” directory:
The wp-content Path :Your_wordpress_root\wp-content For my case my path wp-content is
C:\wamp\www\test\wp-content

Open a folder there.


Step 2)
Create a blank file name your_plugin._name.php. For an example, I use logo.php


Step 3)
Copy the example plugin code to test your plugin file you have just added :

<?php/** * @package fnq *//*Plugin Name: fnqPlugin URI: http://akismet.com/?return=trueDescription: Custom Wordpress plugin, F&QVersion: 0.0.1Author: TestingAuthor URI: fnqLicense: GPLv2 or later*/?><?php
add_action( 'init', 'create_icon_post' );add_filter('manage_edit-gallery_columns', 'add_new_gallery_columns');  function create_icon_post() {    register_post_type( 'logo',//url        array(            'labels' => array(                'name' => 'Logo',                'singular_name' => 'Company Logo',                'add_new' => 'Add New',                'add_new_item' => 'Add New Comapny Logo', //title                'edit' => 'Edit',                'edit_item' => 'Edit Company Logo',                'new_item' => 'New Company Logo',                'view' => 'View',                'view_item' => 'View Company Logo',                'search_items' => 'Search Company Logo',                'not_found' => 'No Company Logo found',                'not_found_in_trash' => 'No Company Logo found in Trash',                'parent' => 'Parent Company Logo'            ),             'public' => true,            'menu_position' => 15,            'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ),            'taxonomies' => array( '' ),            'menu_icon' => plugins_url( 'icon_logo.png', __FILE__ ),            'has_archive' => true        )    );}?>
This is the icon to be copy, named "icon_logo.png"
 

Step 4)
Move to your admin panel and refresh the page, you will find the plugin will automatic applied.

 

And you will find it’s will not appear in the installed plugin list.


Making compare:

If you move the plugin file to plugins folder
The plugins folder path :Your_wordpress_root\wp-content For my case my plugins folder path is
C:\wamp\www\test\wp-content


You will find the plugin would be appear in to installed list and need to be activated by the wordpress users, can’t be enabled automatically.



Remarks:
1.          You cannot be disabled except by removing the plugin file from the must-use directory, which is found in wp-content/mu-plugins by default, if you want disable the Must-use plugin, remove it from the folder or delete it.
2.          The must-use plugin cannot run in sub-folder, to know the detail and the solution, please read this article: Autoload Must Use Plugins In Sub Folders In WordPress

Reference

[Wordpress] Wordpress theme tutorial for beginners (3) - Dynamic Blog Content

This article is continued with [Wordpress][Tutorial with image] Wordpress theme tutorial for beginners (2), After created the basic interface , let make some dynamic blog content!

After adding the code , your blog will be able to display the blog categories, Archives, and also the blog content let add the code to sidebar.php first:

Add code into sidebar.php


    <div id="sidebar">
    <!-- Side Bar Categories -->
    <h2 ><?php _e('Categories'); ?></h2>
    <ul >
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
    </ul>
    <!-- Side Bar Archives -->   
    <h2 ><?php _e('Archives'); ?></h2>
    <ul >
    <?php wp_get_archives('type=monthly'); ?>
    </ul>   
    </div>

Remarks :
Function wp_list_cats() is for call the Categories
wp_list_cats(‘arguments’);wp_list_cats('sort_column=name&optioncount=1&hierarchical=0');
Reference:http://codex.wordpress.org/Function_Reference/wp_list_cats Function wp_get_archives () is for call the Blog Archiveswp_get_archives( $args );wp_get_archives('type=monthly'); Reference:http://codex.wordpress.org/Function_Reference/wp_get_archives

Add code into index.php

asdsad
 <?php get_header(); ?>
    <div id="content">    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>    <h1><?php the_title(); ?></h1>    <h4>Posted on <?php the_time('F jS, Y') ?></h4>    <p><?php the_content(__('(more...)')); ?></p>    <hr> <?php endwhile; else: ?>    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>    </div><?php get_sidebar(); ?><?php get_footer(); ?>


The structure is about checking is there any posts first. 
If there is any post, print the title, post time and content.
Otherwise, display the text “Sorry, no posts matched your criteria”

Result :




Reference:

Sunday, March 3, 2013

[Wordpress] Wordpress theme tutorial for beginners (2) - Adding Interface

After created the most base theme,
(If you missed that, you can visit this link to view )

Let move to making the interface:
=============================================
There are around 4 parts within a wordpress theme, they are header, content, sidebar and footer part.

At usual, header part is for showing the “HTML head Elements”, your site logo and site description, and also the menu bar,
Content is dynamic generated by the wordpress,
Side Bar is for your blog information (for e.g. blog archives, categories and so on. )
Footer is placing your copyright information.

And these is the structure in image:


An overview:
1.          Header (header.php)
2.          Content (dynamic display)
3.          Side Bar (sidebar.php)
4.          Footer (footer.php)

* * *

Step 1)
Now let create some blank pages named “header.php”, “sidebar.php”, ”footer.php” first.




For me I would like to make all the code into a file (index.php) and then divide the code to others file (header.php, sidebar.php, footer.php):

index.php
<html>
<head>
    <title>Leobo theme</title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="main_wrapper">
    <div id="header"></div>
    <div id="content">Theme tutorial testing.</div>
    <div id="sidebar"></div>
    <div id="footer"></div>
</div>  
</body>
</html>

Let go to your wordpress blog to view the amendment:


And now let add some more content into the theme:

index.php

<html>
<head>
    <title>Leobo theme</title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="main_wrapper">
    <div id="header">This is the header.</div>
    <div id="content">Theme tutorial testing.</div>
    <div id="sidebar">Side Bar</div>
    <div id="footer">Text is available under the Creative Commons Attribution-ShareAlike License; <br />
additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. <br />
CopyRight &copy; wordpress and terrapin sky</div>
</div>  
</body>
</html>
style.css
/*
Theme Name: Leobo's Theme
Theme URI: http://www.terrapinssky.blogspot.com/theme/leobo
Author: Xenia Law
Author URI: http://www.terrapinssky.blogspot.com/
Description: This is the most base theme.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blank, base
Text Domain: leobo
*/
div {display:block;}
html {}
body {background:#000;}
#main_wrapper {float:left; background:#fff; width:960px; }
#header { float:left; width:960px; height:100px; background:#000; color:#fff; padding:20px 10px;}
#content { float:left; width:580px; color:#000; padding:20px 10px;}
#sidebar { float:left; width:340px; color:#000; padding:20px 10px;}
#footer { float:left; width:960px; height:100px; background:#000; color:#fff; font-size:11px; padding:20px 10px;}
After added the code to index.php and style.css,
Go to your blog and refresh again,
and found the interface changed :


And now let divide the code from index.php to others page:

header.php
<html><head>    <title>Leobo theme</title>    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"></head><body><div id="main_wrapper">    <div id="header">This is the header.</div>
index.php
 <?php get_header(); ?>
    <div id="content">Theme tutorial testing.</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<- add text in green, keep text in black

sidebar.php
    <div id="sidebar">Side Bar</div>
footer.php
    <div id="footer">Text is available under the Creative Commons Attribution-ShareAlike License; <br />additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. <br />
CopyRight &copy; wordpress and terrapin sky</div></div>   
</body>

</html>



Go to the your blog again and fresh, still look same



Finsh , let add some more complicated in next post:

Continue Reading
[Wordpress][Tutorial with image] Wordpress theme tutorial for beginners (3)

[Wordpress] Wordpress theme tutorial for beginners (1) - Create Basic Theme

The result of this tutorial will create a theme but can be enabled in admin panel.
Purpose is for beginners know the base concept about creating wordpress template only.
To create theme with inferface. Please read my next post.

And let start this chapter:
====================================================
Step 1) 
Go to your theme folder of your wordpress.
It’s in “\wp-content\themes”


Your_wordpress_root\wp-content\themes
change the red text to your installation root of your wordpress 

Step2) 
Create a folder with your template name, for my own example, I use "leodo" be my folder name

 

And then there are 3 files which necessary to be created, they are :
1.          index.php
2.          style.css
3.          screenshot.png

Step3) 
Create these file one by one.
And the screenshot.png can copy my pic below for your testing:




Step4) 
Add the line to your style.css and save it.
/*Theme Name: Leobo's Theme*/


Step5) 
Go to your admin page, Select “Themes”-> “installed themes” at left hand side
 
(if you are already that page, refresh the page)

 And then you will the new theme will appear there.



Also you can activate it. (Although you will see a blank page only..)

Finished !

* * * Extra * * *

Now you can get the theme with the preview image and the name.
but you want add some more information:



You can use these code at your style.css ,
and change the text in green to what you want:
/*
Theme Name: Leobo's Theme
Theme URI: http://www.terrapinssky.blogspot.com/theme/leobo
Author: Xenia Law
Author URI: http://www.terrapinssky.blogspot.com/
Description: This is the most base theme.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blank, base
Text Domain: leobo
*/
And final you will get that:



Continue reading :
[Wordpress][Tutorial with image] Wordpress theme tutorial for beginners (2)

Thursday, February 28, 2013

[Wordpress] wordpress multisite setup tutorial with images

Allow Multisite

   
<--- This is a image with new wordpress.

1) Firstly look for your wp-config.php with your wordpress root directory. 
your_wordpress_root\wp-config.php 
 For my case
 C:\wamp\www\wpmu\wp-config.php

 
 2) Add the line in your wp-config.php:
define('WP_ALLOW_MULTISITE', true);



 3) Refresh your wordpress backend admin page index,
and than you will found there is a new item "Network Setup" appear in Tools panel

Installing a Network

4) Click the "Tool" -> "Network Setup"



5) fill in the blank and click install:


Enabling the Network

6) Copy the code I highlighed in blue in the figure.
Anybody has his/her own case:

7) add the code to your wp_config.php, above the line /* That's all, stop editing! Happy blogging. */ as shown below:


8) Open the file named .htassess in the root of your wordpress root.
The path:
your_wordpress_root\.htassess
 For my case, my path:
 C:\wamp\www\wpmu\.htassess

9) Opened that and add your own code highlighted in blue to your .htassess document :



10) Click link with "log in" shown below to login again.



11) And then if you can found "My Sites" is now the second item. There, all your sites are listed, Your wordpress multisite setup would be finished.