In this tutorial I won’t just be making a sidebar menu, but three additional menus that will be placed side by side in the footer. Unfortunately the code for this is not as easy as it may seem. The possibility of creating the sidebars through only your footer.php and sidebar.php is not going to happen. Fortunately the code is very simple and involves a lot of copy and pasting with a couple modifications.

For this tutorial I will be using wordpress 2.9.2 (currently the latest release)

When creating multiple “sidebars” You only need to do two things. The first thing is to edit the functions.php page, and the second is to edit the HTML where the sidebar/dynamic menu will be placed.

The first thing that we will be doing is opening our functions.php page. The code for one sidebar should look like this:

1
2
3
4
5
6
7
8
9
10

if ( function_exists('register_sidebar_widget') ){
    register_sidebar(array(
        'name'=> __('Sidebar', 'cwj'),
        'id' => 'normal_sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
}

The next thing we will need to do is modify this code so we can have four dynamic menus throughout our Wordpress theme. We will need to copy and paste the array and change out the name and the ID to something new and exciting. Because the menus will be placed in my footer I will be calling them “Footer1″ etc for each menu. The ID can be anything as long as it is unique to that specific menu. If you have two menus with the same ID you will only be able to add widgets to the last referenced menu.

The code should now look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

if ( function_exists('register_sidebar_widget') ){
    register_sidebar(array(
        'name'=> __('Sidebar', 'CJDesign-dark1'),
        'id' => 'normal_sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name'=> __('Footer1', 'CJDesign-dark1'),
        'id' => 'col_sidebar1',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name'=> __('Footer2', 'CJDesign-dark1'),
        'id' => 'col_sidebar2',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name'=> __('Footer3', 'CJDesign-dark1'),
        'id' => 'col_sidebar3',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
}

The next stage in this tutorial is to quickly and easily insert the line of code to display your newly created dynamic menus. Just place this into the HTML where you would like it to be.

1
2

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

You simply need to replace where I have Footer3 with the name of the sidebar that you previously created with the function.

The sidebar now looks as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="footer-col">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer1') ) : ?>
  		<?php endif; ?>
    </ul>
</div>
<div class="footer-col">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer2') ) : ?>
        <?php endif; ?>
    </ul>
</div>
<div class="footer-col">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3') ) : ?>
        <?php endif; ?>
    </ul>
</div>

And the widgets can be modified through the Wordpress widget page.

And the final product.

Recycle pages by splitting your website into pieces with PHP from Calebj on Vimeo.

Often when working with long php scripts you may need more time then is aloud. Recently when working with lirkr search engine I came across a problem where the server would time me out due to the script taking so long. The reason this was taking so long is because I had to read information from pages and load it into the search engines database word by word and check if the word already exists.

Here is a simple way to change the duration of time a script is aloud to be executed for.

1
2
3

<?php
ini_set(max_execution_time, "300");
?>

Be careful when using this script. If your code lasts longer then a few minutes then chances are the code is not very efficient, you have a infinite loop somewhere or you could just be working with a database that not a lot of people will ever have to use.

This step mainly involves breaking the site up into sections of PHP. This will allow us to use various parts and pieces to make the site dynamic.

We may want to create a database and for this article I will be creating a very simple design that is just going to be used to display the information on the page. We will do this by adding a simple connect.php page that will contain the connection information.

1
2
3
4
5
6
7
8

<?php
 
$con = mysql_connect('database.website.com','username','password');
if (!$con) {
die('Could not connect: ' . mysql_error());
} mysql_select_db('databaseName');
 
?>

Now that we have successfully created our connect.php file we can move on to create a small piece of code we will include in the body of the page we created in the first tutorial. In this file we will be selecting information from our database.

1
2
3
4
5
6
7
8
9
10
11

<?php
 
include('connect.php');
$loader = mysql_query("SELECT * FROM table ORDER BY title") or die(mysql_error());
while($row = mysql_fetch_array($loader)) {
 
echo .$row[title].'<br>'.$row['description'].'<br>'.$row['link'].'<br>'.$row['quality'];
 
}
 
?>

Now we have successfully pulled information from our database, created a connection to the database and loaded the connection dynamically. Hopefully this will have helped you in your journey to create a dynamic website.

Creating a framework was on the list of things to do and so when getting off a 7.5 hour shift I started working on the base of it. A few hours later and 7 episodes of Boston Legal later I found myself uploading it and running out the door to work another 7.5 hours. The frame work is very basic, it does link to site information, class files, function but it is not a true framework yet.
The framework is still in its V1.0 stage but it does have potential to be something. The idea behind this framework is simple site construction through a header navigation. It is supporting a validating login and register system but it does not yet have the back end coding to make it all happen. To get a copy of it for yourself you can download it here.

Recently while working on a new blog layout for Code With Design I found myself finding that the code blocks look far to dull. My way of fixing this was to add an image but it didn’t end up helping anything, the image just looked repetitive and thus it is time to find some change and include a random image setup for each block.

Wordpress uses a while loop to display the post information. I plan on taking advantage of this by adding a style to each of the div blocks. This will force the function to load for each div block and thus making the background images random for each individual block.

If the image was entered into the css then each block would look the same:

Function loads -> CSS is put into the style sheet -> style sheet loads into each element.

If the image was loaded on each div individually then the process will look something like this:

Function loads inside of div tag -> CSS is put into the looping div -> On each run the Function runs its random -> The random is placed out on each div.

The function loads a list of URL paths separated by comas. Then you are given the option of using placement properties and two of them so bottom right or top left is aloud. The final variable that this function uses is the repeat. This allows you to repeat the image by x, y, repeat or no-repeat.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
//'/images/br_corner_cloud.png,/images/tr_corner_cloud.png','bottom','right','no-repeat'
//creating a function
function cj_random_image($image_array, $prop1, $prop2, $repeat) {
//image arrays
$image_array = explode(",",$image_array);
 
$image_max = count($image_array);
//random image count based on user input
$image_rando = mt_rand(1, $image_max) - 1;
 
//image
echo 'url('.$image_array[$image_rando].')'.$prop1.' '.$prop2.' '.$repeat;
}
//created by calebj
?>

The first thing the function does is takes what the user has placed into it then outputs it. The main inputs are the URL paths. These paths are counted and the count is used as the maximum on the random. This forces the mt_rand function to return the proper value which means that you can enter any amount of image URLs and the function will still work out.

In order to use this effectively you will need to place the function like so:

1
2
3

<div style="background: #f2f2f2<?php cj_random_image('images/br_corner_cloud.png,images/cloud1.png','bottom','right','no-repeat'); ?> ">
 
</div>

If you would like to see this code working in action please click here. Keep in mind that you need to refresh the page to see the random clouds show up.

Basic Layout

The for loop is a powerful thing when learning PHP it is one of the fundamental prerequisites for creating conditions and accessing data from a database such as SQL. The basic ‘for loop’ looks as follows.

1
2

for () {
}

Demo Loop

When the loop is loaded with content and a condition it will look something more like this:

1
2
3

for ($i = 0; $i <= 9; $i++) {
echo '<p>'.$i.'</p>';
}

Code Breakdown

After beginning to break the code apart we will find that the first line works as follows:

1
2
3
4

for ( //sets the beginning of the loop.
$i = 0; //tells us that the variable is set from 0 even though this is the default.
$i <= 9; //limits the loop so we don't have a string of numbers that never ends.
$i++) //tells the variable i to increment by 1.

When we run the code we will receive an output in our web browser that will look something like so:

1
2
3
4
5
6
7
8
9

This shows that the loop has worked through the conditions of ‘i.’ It simply sets $i to 0, adds 1, remembers the set variable, adds 1 again, remembers the new set variable and does so until the loops has reached its final condition which ends the loop. If you make a loops that does not end or you have a series of loops inside of each other that are very long, then you are going to have problems loading the web page. The most likely result will be a loading fail or a crash executing the script on the server.

Revise the Loop Structure

for (beginning variable; ending condition;increment)
{
Statements that will be executed for each time the loops runs.
}

Nesting the For Loop

It common for people to nest loops inside of loops to allow basic calculations, processes, or time. Say we wanted to create a multiplication table for 1’s that will only multiply up to 3 before changing to the next multiplication series.

1
2
3
4
5
6

for ($firstnumber = 0; $firstnumber <= 3; $firstnumber++) {
for ($secondnumber = 0; $secondnumber <= 3; $secondnumber++) {
$calc = $firstnumber * $secondnumber;
echo "$firstnumber x $secondnumber = $calc <br>";
}
}

Stepping Through the Code

Stepping through the code we recognize that the for loop begins and before closing the second for loop begins. Both of these loops will execute to give you a multiplication table; however, after the first loop runs through once the second loop will continue until done. When the second loop finishes it the loop reverts back to the parent and executes for the second round and thus the nested loop insides goes through 3 times again.

Results

1 x 1 = 1
1 x 2 = 2
1 x 3 = 3
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
3 x 1 = 3
3 x 2 = 6
3 x 3 = 9