Dispelled.ca

At first this seemed like it was going to be really tough, but with this plugin, I was able to use a different theme for mobile browsers. Then I downloaded a mobile theme, and started tweaking.

First, upload the theme you want to use for mobiles to your wpcontent/themes directory. Then add the plugin. Smooci is just like any normal WordPress plugin, you activate it in plugins and then find it’s options under Settings > Smooci. Pick your mobile theme from the dropdown menu, then save. Done.

Now with this particular theme I downloaded, I ran into a few problems right away. First, on the home page, I wanted the whole div to be clickable, not just the title of the post. This makes it friendlier for touch devices. In the file index.php it looks like this. Changed parts are in red.

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

Cut out these two pieces. Then make the code read like this.

<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
     <div id="container">
       <div id="post-<?php the_ID(); ?>">
       <div><?php mtheme_thumb(); ?></div>
     <div>
<h2><?php the_title(); ?></h2>
</div>                
   <div>
   Posted on <?php the_time('F j, Y') ?>
   </div>
   <br clear="all" />  
   </div>                     
 </a>
</div>
 <?php endwhile; ?>

Notice that I also moved the container div to inside the loop to get it to display properly. Next, it wouldn’t display pages. This seems to be a problem with the get_the_image() function. I commented out these two lines.

<?php /* $varimage = get_the_image(array('echo' => false)); ?>
<?php if ($varimage) {get_the_image(array('image_class' => 'imgpost'));} */ ?>

Then pages display their content. Then I needed to change the colors of the site. I looked around style.css and couldn’t find anything. It turns out it is hidden in theme settings. Since I am not setting this theme to be the main theme of the site, this seems a bit backwards. Set the theme of your site to the mobile one, go into current theme settings, change the width to 100% and the color to whatever you like. Then change your theme back to your regular one. I think I will just delete this part of the theme and set the width and colors the normal way in style.css.

At this point it is a fairly decent mobile site, fast and light. Next I’ll start making the theme resemble mine, but for now, I’m happy. It’s not like I even needed to have a special theme for my Samsung Galaxy S2, but since there is more and more mobiles browsers every day, it seemed like a fun thing to do. Now to find out how to do a full site link.

CSS, Phones, PHP 1 comment

Well, I’ve tried the codehighlighter plugin, the syntaxhighlighter plugin, and have just loaded the wp-codebox plugin. Other than a few CSS problems to work out, this one looks like the best.

Some CSS

1
2
3
4
5
6

blockquote {
background:#F4F5F7;
border:1px dashed #CCC;
padding:8px 12px 8px 36px;
margin:5px 0;
}

Some Javascript

1
2
3
4
5

this.REclassMain = new RegExp('\b' + this.classMain + '\b', 'gi');
this.REclassMainLive = new RegExp('\b' + this.classMainLive + '\b', 'gi');
this.REclassTab = new RegExp('\b' + this.classTab + '\b', 'gi');
this.REclassTabDefault = new RegExp('\b' + this.classTabDefault + '\b', 'gi');
this.REclassTabHide = new RegExp('\b' + this.classTabHide + '\b', 'gi');

Some PHP

1
2
3
4
5
6

<?php
$variable = wp_list_categories('echo=0&show_count=1&title_li=');	
$variable = str_replace(array('('), '<small>', $variable);
$variable = str_replace(array(')'), '  posts</small>', $variable);
echo $variable;
?>

CSS, Javascript, PHP 1 comment