Robert Basic's blog

Posts tagged 'wordpress'

Wordpress as CMS tutorial

by Robert Basic on March 14, 2009.
Heads-up! You're reading an old post and the information in it is quite probably outdated.

Wordpress is one of the best blogging platforms out there — if not the best. It’s very powerful, can be easily extended and modified. It’s documentation is very well written and, so far, had answer to all of my crazy questions :)

You know what’s the best part of Wordpress? With some knowledge of PHP and MySql, you can turn it into much more than just a blogging platform. After doing some HTML to WP work for Roger, I thought of one way how could Wordpress be transformed into a CMS. Note the “one way”. This is not the only way for doing this, and, most likely, not the best way.

I didn’t look much, but I think that there are some nice plugins out there that can do this. But, where’s the fun in the download, upload, activate process? Nowhere!

I will show you how to change your Wordpress into a CMS and it really doesn’t take much coding to achieve this! The example presented here is simple and will have a static page for it’s home page, another static page for the “Portfolio” page and the blog. The home and portfolio page will have some of own content and both will include some content from other static pages. You all most likely know the blog part ;)

Static pages

Things you should know: each static page has it’s title, it’s slug or name (the thing that shows up in your browsers address bar: http://example.com/portfolio/ - right there, the portfolio is the slug!), has the parent attribute and the template attribute. The parent attribute is used when it’s needed to make one page a child of another, i.e. to show Page2 as a subpage of Page1. The template attribute is used when we want to apply some different layout and styling to a static page. Read more about static pages and how to create your own page templates.

If you want to, you can download the theme I created for this tutorial from here (it’s not a designers masterpiece, what did you expect?), or you can use any theme you want.

I hope you read the part on creating page templates, I really don’t feel like explaining the next part.

Create 3 new files in your template directory (if you’re using my theme, these files are already there): home.php, portfolio.php and blog.php. Contents of these files are:

// home.php
<?php
/*
Template Name: Home
*/
?>

// portfolio.php
<?php
/*
Template Name: Portfolio
*/
?>

// blog.php
<?php
/*
Template Name: Blog
*/

// Which page of the blog are we on?
$paged = get_query_var('paged');
query_posts('cat=-0&paged='.$paged);

// make posts print only the first part with a link to rest of the post.
global $more;
$more = 0;

//load index to show blog
load_template(TEMPLATEPATH . '/index.php');
?>

To understand the contents of the blog.php file, please take a look at this.

Now, go to the dashboard, the Pages section and write 3 new static pages:

  • Home, with the slug home, for the template choose Home from the drop-down list (it's on the right side) and the parent leave as is (Main Page)
  • Portfolio, with the slug portfolio, for the template choose Portfolio
  • Blog, with the slug blog, for the template choose Blog

You can add some content to the Home and Portfolio pages, but don’t add any to the Blog page.

Organizing links

Now, let’s make that when we are on http://example.com/ it shows us the Home page, instead of the Blog, and when on the http://example.com/blog/ to show us the blog!

Go to Settings->Reading and where it says “First page displays” choose “A static page”, and under the “Front page” drop-down choose “Home”.

Now, go to Settings->Permalinks and change the “Custom structure” to /blog/%postname%/ or whatever is your preferred permalinks structure, but it must start with /blog/! If Wordpress can’t write to your .htaccess file (I hope it can’t!), open it up in your editor and type the following (or similar, depends on your setup):

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

The point is in the RewriteBase, with that we’re telling WP where to find the blog. On default setups, when http://example.com/ points to the blog, the RewriteBase is simply / but with the blog located at http://example.com/blog/ we need to change the RewriteBase. If all is well, we’re done with organizing the links.

While you’re still in the dashboard, write some new static pages with content. For the parent of these pages choose Portfolio and leave the template the default (the default page template is page.php).

Time for coding!

Here are two functions I wrote for retrieving content from static pages which will be then included in other static pages:

// functions.php
<?php

/**
* Gets last $number_of_subpages from their $parent_page
* If the <!--more--> tag is ignored ($ignore_more=true) returns the entire content of the subpages
*
* @param mixed $parent_page Contains either the slug of the parent page or it's ID
* @param integer $number_of_subpages Number of subpages to return
* @param boolean $ignore_more Whether to ignore the <!--more--> tag or not
* @return array Contents and titles of subapages
*/
function wpascms_get_subpages($parent_page='portfolio', $number_of_subpages=2, $ignore_more=false)
{
    global $wpdb;

    if(is_string($parent_page))
    {
        $parent_page_ID = wpascms_get_parent_page_ID($parent_page);
    }
    else
    {
        $parent_page_ID = $parent_page;
    }  

    if($number_of_subpages == 0)
    {
        $limit = '';
    }
    else
    {
        $limit = 'LIMIT 0, ' . $number_of_subpages;
    }
    // Get all subpages that are published and are childs of the given parent page
    // and order them by date in descending order (latest first)
    // also, if needed, limit to the latest $number_of_subpages
    $subpages = $wpdb->get_results("SELECT * FROM $wpdb->posts
                                    WHERE `post_parent` = '$parent_page_ID' AND `post_type` = 'page' AND `post_status` = 'publish'
                                    ORDER BY `post_date` DESC $limit");

    if(!$ignore_more)
    {
        foreach($subpages as $key=>$subpage)
            if(strpos($subpage->post_content, '<!--more-->') !== false)
            {
                $short_content = explode('<!--more-->', $subpage->post_content, 2);
                $subpages[$key]->post_content = $short_content[0] . '<a href="' . get_permalink($subpage->ID) . '">Read more...</a>';
            }
        }
    }

    return $subpages;
}

function wpascms_get_parent_page_ID($parent_page)
{
    global $wpdb;

    $id = $wpdb->get_var($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE `post_name` = %s AND `post_type` = 'page' AND `post_status` = 'publish'", $parent_page));

    return $id;
}

?>

The first function, wpascms_get_subpages() returns the given number of subpages from a specific parent page. By default it will break the content on the tag and append a “Read more…” link. The first parameter can be either a string containing the slug of the parent page, or the ID of the parent page. The second parameter is the number of subpages we want returned. If it’s zero, all subpages will be returned. The second function is merely a helper function, to get the id of the parent page based on it’s slug. To read more on querying the database, read this page.

Here’s how I’m calling this function on my example Home page:

<?php
/*
Template name: Home
*/

get_header();
?>

    <div id="home">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <h2><?php the_title(); ?></h2>

        <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

    <?php endwhile; endif; ?>
    </div><!-- home -->

    <div id="latest_works">
    <h1>Recent work</h1>
    <?php $subpages = wpascms_get_subpages();
    if(count($subpages) > 0):
        foreach($subpages as $row=>$subpage):
        if($row%2 == 0)
        {
            $class = "left_work";
        }
        else
        {
            $class = "right_work";
        }
    ?>
        <div class="<?php echo $class; ?>">
            <h2><a href=<?php echo get_permalink($subpage->ID); ?>><?php echo $subpage->post_title; ?></a></h2>
                <?php echo $subpage->post_content; ?>
        </div>
    <?php
        endforeach;
    endif;
    ?>
    </div><!-- latest_works -->

<?php
get_footer();
?>

In words: including the header, then showing any content of the home page. After that getting the subpages: by default, wpascms_get_subpages() is getting the newest 2 subpages of the portfolio page. I’m showing the content of the subpages in 2 columns. What we got with this? Add a new subpage to the portfolio and it will automagically show up on the left side column. In the end, including the footer.

Here’s another example from the portfolio page:

<?php
/*
Template name: Portfolio
*/

get_header();
?>

    <div id="portfolio">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <h2><?php the_title(); ?></h2>

        <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

    <?php endwhile; endif; ?>
    </div><!-- home -->

    <div id="latest_works">

    <?php $subpages = wpascms_get_subpages('portfolio', 0);
    if(count($subpages) > 0):
        foreach($subpages as $row=>$subpage):
    ?>
        <div class="work">
            <h2><a href=<?php echo get_permalink($subpage->ID); ?>><?php echo $subpage->post_title; ?></a></h2>
                <?php echo $subpage->post_content; ?>
        </div>
    <?php
        endforeach;
    endif;
    ?>
    </div><!-- latest_works -->

<?php
get_footer();
?>

Same thing is happening here: including the header, showing the content of the portfolio page. Getting the subpages, but now all of the subpages that are childs of the portfolio page, and showing them one under the other.

All subpages can be viewed each on it’s own page, but that is just a plain ol’ page.php file, so I’ll skip that.

Don’t limit yourself to the existing plugins or waiting for one tutorial/example that will show how you can make everything. Don’t be afraid to get your hands dirty by hacking some code. It really doesn’t take too much to create magic with Wordpress ;)

Cheers!

Tags: blog, cms, example, hack, php, tutorial, wordpress.
Categories: Development, Programming, Software.

TickTweet WordPress plug-in

by Robert Basic on November 21, 2008.
Heads-up! You're reading an old post and the information in it is quite probably outdated.

Few weeks ago @imjustcreative mentioned on Twitter that he would like a WordPress plug-in that would scroll (tick) tweets where “soultweet” is mentioned. As I wanted to do a plug-in for some time, but never had any good ideas, I told him that I’ll take up the job. So I started to work on this in my free time.

Before I even started looking at anything, I decided that I want this plug-in to be fast, to work with smallest possible data to save bandwidth and to keep the number of calls towards Twitter low.

First I looked into the Twitter Search API documentation, to see how data can be retrieved from Twitter — in Atom or in JSON.

The first idea...

As a JSON document is smaller than an XML document, I decided to retrieve data in JSON. Of course, once retrieved it would be cached locally in a file for some time (5 minutes is my default).

I also wanted to avoid the possibility of the page waiting to retrieve the data from Twitter, so I figured that it would be the best to call it up with Ajax. That way, when the plug-in is called up, it sends an Ajax request to himself, the page continues loading normally and in the background runs the Ajax request.

The draft was there, I looked at the WordPress writing a plug-in page and in a week or so the first version of the plug-in was ready to go out.

I tested it locally on my Windows machine (a basic WAMP setup) and on my Ubuntu machine (a basic LAMP setup), on this server and on another one which has a ton of security limitations (server of my College). I was glad to see that it worked like a charm on all 4 servers. I put up a TickTweet page, and let it out in the wild through Twitter.

The retweet madness started immediately. @imjustcreative, @jonimueller and @bishop1073 downloaded it right away. Soon as they enabled the plug-in, the short and exciting life of TickTweet started to end. Errors, bugs… Joni’s server is running on PHP 4, and I had a few PHP 5 only functions. My bad. On Graham’s and Bishop’s server who knows what went wrong. Graham helped me a lot tracing down the bugs, a few of them were found and squashed, but that was not enough. So I decided to pull back TickTweet, rethink it and possibly rewrite it.

The second idea...

OK, this JSON — Ajax thingy won’t work. Back to the paper. I started looking at the WordPress core to see what functions and/or classes are available in it for this kind of task… Didn’t took me long to find the fetch_rss() function. Man I was happy to find that! It’s using the MagpieRSS and the Snoopy classes to retrieve the data. I figured, those are included in WP’s core, they’re gonna do the job just fine. So I’ve rewritten it.

Testing again. The College’s server was dropped out right away, no way around that security. On others it worked fine. I tested for a couple of days just to make sure. When I thought it was OK, I’ve let it go once again. I contacted Joni, Graham and Bishop to tell them that the new rewritten version is out. On Joni’s site it worked. Awesome. On Bishop’s site worked. Kinda. On Graham’s site didn’t work. He tried it on another site. Worked. Cool. Finally it works. I was happy.

But not for long. The next day I saw that on my site it’s ticking some ol’ tweets. What?! Then started the bug hunting again. I looked at each line of code, var_dumped every variable. No luck. Somehow, all of a sudden, my server is not getting the data from Twitter. No changes on the server configuration, no change in the code, but it just won’t work.

The third idea...

The third idea is to leave this “plug-in” as—is, and to stop working on it. It just doesn’t pay off. Sure, I could trace down where it hangs on my server, going backwards through the code, but it’s just not worth it. Those who are interested in this plug-in, you can find it at the TickTweet page, use it, rewrite it, change it, trash it.

Cheers!

Tags: about, blog, php, plugin, site, wordpress.
Categories: Blablabla, Development, Programming, Software.

Powered by WordPress 2.7 beta 1

by Robert Basic on November 04, 2008.
Heads-up! You're reading an old post and the information in it is quite probably outdated.

I’ve decided to upgrade to WordPress 2.7 beta 1, just for fun. For now, no major problems occurred, just a few smaller ones, all which are caused by my hacking of the WordPress core — I wasn’t keeping track of all hacks I did, so there were some random errors, but everything should be fine now.

I don’t recommend to no one upgrading to this version, unless you are OK with possible problems caused by this beta version. And even if you decide to upgrade now, do a backup of your database! Heck, do 2 backups!

First I did was backing up… No, I lie. First I did was start copying files of the wp-admin folder up to the server, when it came to my mind that I forgot to backup the database. Silly me. While it was copying I did a backup. Then I copied the contents of the wp-includes folder and then the files under the root folder of my blog. I haven’t uploaded nothing from the wp-content folder.

Oh yeah. Under the root folder, skip copying one file (if it’s there): the wp-config.php file, just to prevent overriding the configurations.

I tried to login to the dashboard. A message waited me, saying something like the database needs to be upgraded, blablabla, with a big a button. So I pressed the button. And everything went well. I logged in to the dashboard, to find out that I can finally find my way around the dashboard. It’s soooo much better now!! Errmm… I even saw a screenshot of it some where on the Internet… Meh. Can’t find it now.

After fixing those little errors I saw that my custom made template is working just fine and the plugins too — all 3 of them.

So there. My blog is now powered with WordPress 2.7 beta 1. I thought to write a tutorial on upgrading from WP 2.6.x to WP 2.7 but as it all comes down to uploading the files and hitting that “Upgrade database” there is no need for a tutorial.

Oh, and in case you missed it: do a bloody backup first!

Cheers!

P.S.: If someone finds some errors or the blog starts misbehaving let me know! Thanks!

Tags: blog, upgrade, wordpress.
Categories: Blablabla, Free time, Software.

Wordpress paging navigation

by Robert Basic on October 06, 2008.
Heads-up! You're reading an old post and the information in it is quite probably outdated.

As I’m not a big fan of Wordpress plug—ins, and I wanted to use a normal page navigation, not just the default “Previous posts” and “Next posts”, I decided to play around a bit and create my own paging navigation, or pagination.

Preparation

First, I wrote on a piece of paper which links I need: first page, last page, next page, previous page and the links with the page numbers. Next, I needed to see what functions are already in Wordpress, to reuse as much as I can. After a little searching, I found that the functions for the default navigation are located in the link-template.php file, under the wp-includes folder. There are the functions for the next and previous pages, and the function that creates the URL. Furthermore, I wanted a sliding pagination (like Yahoo has on it’s search page), ‘cause it’s easy to use and looks cool.

The function

So, let’s take a look at the code. I called the function simply get_pagination; it’s quite self—describing. I put it in the link-template.php file, that way, all functions for navigation are in one place.

<?php
/**
* A pagination function
* @param integer $range: The range of the slider, works best with even numbers
* Used WP functions:
* get_pagenum_link($i) - creates the link, e.g. http://site.com/page/4
* previous_posts_link(' « '); - returns the Previous page link
* next_posts_link(' » '); - returns the Next page link
*/
function get_pagination($range = 4){
  // $paged - number of the current page
  global $paged, $wp_query;
  // How much pages do we have?
  if ( !$max_page ) {
    $max_page = $wp_query->max_num_pages;
  }
  // We need the pagination only if there are more than 1 page
  if($max_page > 1){
    if(!$paged){
      $paged = 1;
    }
    // On the first page, don't put the First page link
    if($paged != 1){
      echo "<a href=" . get_pagenum_link(1) . "> First </a>";
    }
    // To the previous page
    previous_posts_link(' « ');
    // We need the sliding effect only if there are more pages than is the sliding range
    if($max_page > $range){
      // When closer to the beginning
      if($paged < $range){
        for($i = 1; $i <= ($range + 1); $i++){
          echo "<a href='" . get_pagenum_link($i) ."'";
          if($i==$paged) echo "class='current'";
          echo ">$i</a>";
        }
      }
      // When closer to the end
      elseif($paged >= ($max_page - ceil(($range/2)))){
        for($i = $max_page - $range; $i <= $max_page; $i++){
          echo "<a href='" . get_pagenum_link($i) ."'";
          if($i==$paged) echo "class='current'";
          echo ">$i</a>";
        }
      }
      // Somewhere in the middle
      elseif($paged >= $range && $paged < ($max_page - ceil(($range/2)))){
        for($i = ($paged - ceil($range/2)); $i <= ($paged + ceil(($range/2))); $i++){
          echo "<a href='" . get_pagenum_link($i) ."'";
          if($i==$paged) echo "class='current'";
          echo ">$i</a>";
        }
      }
    }
    // Less pages than the range, no sliding effect needed
    else{
      for($i = 1; $i <= $max_page; $i++){
        echo "<a href='" . get_pagenum_link($i) ."'";
        if($i==$paged) echo "class='current'";
        echo ">$i</a>";
      }
    }
    // Next page
    next_posts_link(' » ');
    // On the last page, don't put the Last page link
    if($paged != $max_page){
      echo " <a href=" . get_pagenum_link($max_page) . "> Last </a>";
    }
  }
}

The “range” is the range of the sliding effect, i.e. how many numbers are shown besides the current number: if the range is 4, and the current page is 5, then the numbers 3, 4, 5, 6 and 7 are visible.

Usage

It’s quite simple to use it: where the pagination is needed, just call the get_pagination() function, and it will show up. Add some CSS style to it, and your good to go.

Hope someone will find this useful :)

Tags: example, navigation, php, wordpress.
Categories: Development, Programming, Software.