And now Wordpress has released an official Android-app and I am just now trying it out.

Thank you, Irene!

Read more after the jump!

I’ll be using my own WP Blank theme to show you how to do this and what we will create is a layout that looks like this: sidebar | sidebar | CONTENT | sidebar.

Defining sidebars

First we need to make sure that we have 3 sidebars defined in the theme function.php-file. Open it up an look for this:

<?php
if ( function_exists('register_sidebars') )
register_sidebars(2, array(
'name'=>'Sidebar %d',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
?>

The highlighted piece of code is where it’s defined how many sidebars there are in this theme. Naturally you change this into 3 and voilá; you have an extra sidebar. In terms of keeping your PHP-code clean this is the best way to do it, but it might be a bit confusing once you’re in the widget-area in your admin-panel.

So we are going to name these sidebars instead and this is going to generate a bit more code in functions.php. You can replace the first piece of code (shown above) with this:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Sidebar Left',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
)); ?>
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Sidebar Middle',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
)); ?>
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Sidebar Right',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
)); ?>

I’m quite sure you can figure out what the sidebars are going to be named now…?

It will look something like this in the admin section now:

Creating the sidebars

To get the sidebars to show up we now need to define them in the theme files. There are a number of different ways to do this and the way I’ll show might be a bit “clumsy” and old school, but in return it’s easier for beginners to understand just what it is they are doing this way. What we’ll do is create three different .php-files, one for each sidebar.

Open up the existing “sidebar.php” and replace all the code in it with this:

<div class="sidebar-wrap">
<div class="sidebar" id="sidebar_left">
      <?php	/* Widgetized sidebar */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>    

			<?php endif; /* End of widgetized sidebar */ ?>
</div>
</div>

Next, duplicate that file and name it “sidebar2.php” and make the highlighted changes:

<div class="sidebar-wrap">
<div class="sidebar"  id="sidebar_middle">
      <?php	/* Widgetized sidebar */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>    

			<?php endif; /* End of widgetized sidebar */ ?>
</div>
</div>

And finally do the same thing once more, naming it “sidebar3.php” and setting the id to “sidebar_right” and the “dynamic_sidebar” to 3.

Now you have three different files named sidebar.php, sidebar2.php and sidebar3.php and every one of these will contain one of the three sidebars you defined in functions.php.

Executing the sidebars in your theme

No reason having a bunch of sidebars if nobody sees them, ey?

To place your newly created sidebars we’ll use index.php as an example. Open it up and look for:

<?php get_sidebar(); ?>

Comment that out (or remove it) and replace it with

<?php include('sidebar3.php'); ?>

Then you move to the beginning of index.php and directly under

<?php get_header(); ?>

you’ll put:

<?php include('sidebar.php'); ?>
<?php include('sidebar2.php'); ?>

Now it’ll look something like in the screenshot below and that means we’re half way there, all we need to do now is tell the css-code how we want the sidebars placed.

Positioning the sidebars with CSS

To do this we’ll use the css id’s we specified earlier: sidebar_left, sidebar_middle and sidebar_right. If you are using the WP Blank theme open up style.css and look up where it says

@import url("layouts/sidebar_left.css");

and change this to

@import url("layouts/sidebar_3.css");

(or whatever you want to call your new stylesheet) and then create a new, empty stylesheet in the layouts-folder.

Add this code to place the columns in the order I showed you in the beginning of the post (sidebar | sidebar | CONTENT | sidebar) and make the sidebars 150px wide and the content column 450px:

#sidebar_left {float:left; clear:left;width:150px}
#sidebar_middle{float:left; clear:none;width:150px}
#sidebar_right {float:left; clear:right;width:150px}

#wrapper {width:913px; margin:0 auto}
.posts-wrap {float:left; clear:none;width:450px}
#footer,#header {float:none;clear:both}

And now your theme should look like this:

Of course you can change the look of this layout, but that’s a whole other tutorial!

That’s me – geek extraordinaire! =) Photo by @tesas at Geek Girl Meetup this weekend, pretty much the most awesome event ever!

And on top of that I have a prototype to finish and assignment in my PHP-course to hand in before Sunday. Phew…

————–
Emailed from iPhone

Posted from lolitaloco’s posterous

(The “test” pictures are from the very nice sunday brunch I had today.)

I’ve been getting som questions about how to have your WP-install in a subfolder but without the /wordpress-suffix on your domain, mainly by people that have used some sort of auto-installer to set up their blog.

This often results in a situation where you already have a subdirectory and the blogadress is set to www.domainname.com/wordpress or corresponding. The instructions in the WP codex presumes that you are moving your WP files, sometimes making it a bit confusing for beginners to understand them.

Changing this acually isn’t that difficult, so here it goes:

First; some need-to-knows:
1. Use some kind of ftp-program to access the files.
2. To save yourself from headache – do not change any settings in the WP admin area under Settings/General until the very last step!
3. The original index.php-file in /public_html/wordpress/ is to remain unaltered, you only need to copy it!
3. The root folder is commonly named “public_html” but not always. If unsure – ask your web host.
4. These instructions presumes that the folder where your Wordpress files are located is called “wordpress”, that your domain name is “yourbloghere.com” and that your root folder is called “public_html”.

Let’s get to work!

1. Go to /public_html/wordpress/ and download the file called index.php.

2. Open index.php in for example Notepad and find where it says require(‘./wp-blog-header.php’);

3. Change this into require(‘./wordpress/wp-blog-header.php’); and save the file.

4. Make sure you don’t have any files named index.html, index.php or anything like that in /public_html/. (If you do – rename them to for example index_old.)

5. Upload your altered index.php here. (Not in /public_html/wordpress/!)

6. Make sure everything is correct and that the “index.php” in /public_html/wordpress/ looks the same way it did when you started.

7. Now go to the admin area of your blog, Settings -> General and change “Blog address (URL)” to “http://yourbloghere.com”. (The “WordPress address (URL)” should be “http://yourbloghere.com/wordpress”)

8. Voilá – your done! Surf to http://yourbloghere.com/ and take a look! =)

Och så på svenska:

1. Gå till /public_html/wordpress/ och ladda ner filen som heter index.php.

2. Öppna index.php i exempelvis Anteckningar och hitta där det står require ( ‘./wp-blog-header.php’);

3. Ändra detta till require ( ‘./wordpress/wp-blog-header.php’); och spara filen.

4. Kontrollera att du inte har några filer som heter index.html, index.php eller liknande i /public_html/.  (Om du har det – döp om dem till exempelvis index_old.)

5. Ladda upp din modifierade index.php till /public_html/ . (Inte till /public_html/wordpress/!)

6. Kontrollera att allt är korrekt och att “index.php” i /public_html/wordpress/ ser på samma sätt som den gjorde när du började.

7. Nu loggar du in till admin, går till Inställningar -> Allmänt och ändrar “Bloggadress (URL)” till “http://yourbloghere.com”. (I “WordPressadress (URL)” ska det stå “http://yourbloghere.com/wordpress”)

8. Voilá! Surfa in på din blogg och ta en titt! =)

Further on they’ll even be giving away a 32GB iPod touch! Not bad at all. =)

How to not overboil milk - you cook it in a gigantic boiling pan.