WordKnitting: Moving PHP from Drupal to WordPress

After having played around with Drupal for a year or so I decided that not only do I like simple (wat simpel!) I also wanted to start to blog. In came WordPress – THE expert (or so I was told) in blogging.

My old site in Drupal had a few neat features that I really wanted to take along to WordPress.

And what better way to blog than to share the experience of moving one of these features, Word Knitting, from Drupal to WordPress.

In Drupal I had made a module which I could include as a page and link to it. The interface was based on Drupal hooks and the code was written in PHP. As I read that WordPress also supports PHP I was all ready for a simple conversion.

Well, to be honest it was not simple! Having installed WordPress and created a Welcome blog I then had to discover how on earth a form running PHP code could be deployed to my WordPress environment.

I read over 100 different search results in Google. To my dismay they kept pointing to plug-ins and other such things and when trying them out they just did not work. Stumbling through all these pages I discovered that the most important aspect in trying to find out how to do something – is actually knowing exactly how to search for it. What would WordPress call creating a totally self created page with a form? Apparently they call it Custom Page Templates!

That is the key to creating wonderfully built PHP functionality in your WordPress site.

Finally I found a handful of pages and instead of copying exactly what they say on how to do exactly what I learnt to do – I thought I’d share those pages with you:

Creating WordPress Custom Page Templates

Create Custom Page Templates in WordPress

How to Make Custom Page Templates in WordPress

So, now that all the searching is done on how to do it – all I had to do was create a Custom Page Template and place it in the current themes folder ( I called it page-wordknitting.php ) and create the needed code onto this page. The place needs to be placed in the folder of the theme you are using. To be able to use the template,  edit a newly created page and set the template to (in this case) WordKnitting.

Here below are the sections of the code I used. Starting with, of course, the header. WordPress seems to automatically pick up on the Template name which makes it accessible to pages made in the current theme:

<?php
/*
Template Name: Wordknitting
*/
?>

I then started with the “submitted” code.

<?php
  if(isset($_POST[‘submitted’])) {
    // grab what is entered in the tiles
    $tiles = trim($_POST[’tiles’]);
    $tiles_length = strlen($tiles);

    // grab what is entered in the pattern
    $pattern = trim($_POST[‘pattern’]);
    $pattern_length = strlen($pattern);

    // check if any errors in what is entered

    // if no errors found…
      // reads in the wordlist
      // rest of the code calculates the output by looping through the words
      // the output is an array of words that match the tiles and pattern
      // I converted the output to a HTML table format (text)
}
?>

The above calculates the word list $possible_words and writes to a table $mytable which is actually just flat text in HTML table format. If you would like to see all the code instead of the slimdowned version above – just mail me.

The next section is the part that had to be written especially for the WordPress version as WordPress does not use Drupal hooks. It has it’s own hooks and own style – and by using the page.php example a lot of the styling of the current theme can be copied over.

I started with a basic page layout, using the standard layout and ensuring the theme I use is also used on this page:

<?php get_header() ?>
<div id=”container”>
  <div id=”content”>
    <?php the_post() ?>
    <div id=”post-<?php the_ID() ?>” class=”post”>
      <h2 class=”page-title”><?php the_title(); ?></h2>
      <?php edit_post_link(__( ‘Edit’, ‘themezee_lang’ )); ?>
      <div class=”entry-content”>

      </div><!– .entry-content –>
    </div><!– .post–>
  </div><!– #content –>
</div><!– #container –>
<?php get_sidebar() ?>
<?php get_footer() ?>

Next I started building up the form in the “entry-content” section. I havent included the code for the first lines of text as that was pretty self-explanatory.

This builds up the form as you see it on the page. The three inputs (language, tiles and pattern) remember what was last inserted after the form is submitted – that’s why there is PHP included in those sections.

The errors that are reported back are also generated in the first section of the “submitted code”. PS Please ignore the layout of the below code. I am still learning the basics of laying out a simple blog 🙂

<form action=”<?php the_permalink(); ?>” id=”wordForm” method=”post”>
<ul class=”wordForm”>
<li>
  <table border=”0″>
    <tbody style=”font-size: 8pt”>
      <!– the top text goes in here, in table format –>
    </tbody>
  </table>

  <table border=”0″>
  <tr>
    <td><b>Language:</b></td>
    <td>&nbsp<select name=”language” id=”language”>
          <option value=”1″ <?php if ($_POST[‘language’] == “1”) echo ‘selected=”selected” ‘; ?> >English</option>
         <option value=”2″ <?php if ($_POST[‘language’] == “2”) echo ‘selected=”selected” ‘; ?> >Dutch</option>
    </select></td>
  </tr>

  <tr>
    <td><b>Tiles:</b></td>
    <td><input type=”text” name=”tiles” id=”tiles”
value=”<?php if(isset($_POST[’tiles’])) echo $_POST[’tiles’];?>” class=”required field”/>
        <?php if($tilesError != ”) { ?>
          <span class=”error”><?=$tilesError;?></span>
        <?php } ?>
    </td>
  </tr>

  <tr>
    <td><b>Pattern:</b></td>
    <td><input type=”text” name=”pattern” id=”pattern”
value=”<?php if(isset($_POST[‘pattern’])) echo $_POST[‘pattern’];?>” />
        <?php if($patternError != ”) { ?>
          <span class=”error”><?=$patternError;?></span>
        <?php } ?>
    </td>
  </tr>

  <tr>
    <td></td>
    <td><button type=”submit”>GO!</button></td>
      <?php if($fileError != ”) { ?>
        <span class=”error”><?=$fileError;?></span>
      <?php } ?>
  </tr>
</table>
<table border=”0″>
  <tr><td>
    <?php if ($table_caption != ”) { ?>
      <?echo $mytable; ?>
    <?php } ?>
 </td></tr>
</table>
</li>
</ul>
<input type=”hidden” name=”submitted” id=”submitted” value=”true” />
</form>

Another stumbling block of the above code was displaying the table on the screen for the user to see. But then again it is knowing that it exists (and knowing what to search for) more than writing it:

<?php if ($table_caption != ”) { ?>
  <?echo $mytable; ?>
<?php } ?>

And that was all I had to do to get it to work. At the end of the day: pretty simple (wat simpel!).

 

Comments are closed.