Creating Custom Themes in WordPress

6 Oct
2011

Anyone ever created a custom theme for wordpress? Like, from scratch? Not a child theme, but an actual custom theme? Harder than you might think. A solid knowledge of PHP, HTML, and CSS are essential. My PHP skills are a little lacking, so it’s turning out to be a bit harder than I had hoped.

Conclusion. Starting from a stripped down theme (my personal favorite is Toolbox) seems to be the way to go. A lot of the coding has been done already, and you are pretty much ready to customize and get your client’s site up and running without losing (and in most cases actually gaining) functionality.

How to create a wordpress custom menu

5 Oct
2011

When creating a custom menu in a wordpress custom theme, here are the steps to follow.

1. declare the custom menu in functions.php
2. call the custom menu in header.php
3. style with CSS

Step 1
Put the following code in functions.php in your theme file:

    // Declare a custom menu
    if (function_exists('register_nav_menus')) {
    register_nav_menus(array('main_nav' => 'Main Navigation Menu'));
	}

Step 2
Put the following code in your header.php to call the menu:

<nav id="main-menu">
 <h2>Main Navigation</h2>
 <?php wp_nav_menu(array('menu' => 'JM Menu')); ?>
</nav>

Step 3
Place the following CSS in your style.css file (sorry if it’s a bit hard to read, just copy/paste and go through it).

nav#main-menu h2{display:none;}
nav#main-menu{
display:block;float:left;width:100%;background:#990000;}
nav#main-menu ul{list-style:none;margin-left:0px;}
nav#main-menu ul li a{display:block; float:left; color:#fff; text-decoration:none; padding:5px 10px;}
nav#main-menu li{float:left;position:relative;}
nav#main-menu ul ul{background:#990000; display:none;float:left; position:absolute; top:20px; left:0; width:188px ;z-index:99999;}
nav#main-menu ul ul ul{left:100%;top:0;}
nav#main-menu ul ul a{height:auto;width:168px;}
nav#main-menu li:hover > a,
nav#main-menu ul ul :hover > a,
nav#main-menu a:focus {background:#660000;color:#efefef;}
nav#main-menu ul li:hover > ul{display:block;}cs

A quick note about my webhost

6 Sep
2011

I have to give a quick shout-out to my host, WebHostingHub.com. They are amazing. Here are some of the features I have, for about $6/month:

  • Unlimited domains on my hosting account
  • Unlimited bandwidth
  • Unlimited storage space
  • Easy wordpress installations
  • 24/7 tech support chat. It’s brilliant.
  • They aren’t blocked in China!

Consider it. And if you go through this link, it’ll help pay for my hosting!

Putting Code in your WordPress blogs

5 Sep
2011

Install the Code Markup plugin (from this site).

Wrap your code first in a ‘pre’ tag, then a ‘code’ tag:

 <pre>
 <code lang="html">
  actual code goes here

The important part is the CSS:

pre {
 background:#efefef;
 border:1px solid #ccc;
 padding:5px;
 white-space:pre-wrap;
}

How to make a simple guestbook in WordPress

2 Sep
2011

Create a page. Under “Screen options” make sure you have “discussion” checked so you can confirm that comments are turned on.

Yep, that’s it. A page with comments enabled. Told you it would be simple! :)

I’m sure there are plugins for fancy guestbooks…but a guestbook is only meant for one thing. So for my time & money, I’d say do something simple and spend a few minutes tweaking the CSS of your theme to make it look nice. When it comes down to it, if someone is coming to your guestbook page, they are there to do one thing…leave a note. So make it simple!

1 Comment

Create an Image Gallery in WordPress

1 Sep
2011

If you don’t want to use wordpress’ default image gallery (and I’m assuming…if you’ve spent any time at all with it that you don’t), I would recommend using the NextGen Library plugin.

Here’s how to install and get up and running:

Step 1: Download the NextGen Library
Click here to download the plugin from wordpress. Put in “/wp-content/plugins”. Activate the plugin in the plugins section.

Step 2: Create a new gallery
At the bottom of your left sidebar in the dashboard you’ll see a “Gallery” tab. Click that to add a new gallery. From here you can upload single or multiple pictures.

Step 3: Insert into blog post
By default, many blog posts won’t show the images on the home page, because your blogs are only showing the excerpt. So either remain happy with that and find another way to let people know there are images in your blog, or change the code so the front page shows the full body text of your blogs.

Here are three of many options when it comes to putting a gallery in your blog post. You’ll see a new icon on the far right. That’s how you insert an image gallery into the blog post. But here’s the basic code:

slideshow: [slideshow id=1]
image browser: [imagebrowser id=1]
image list: [nggallery id=1]

That’s it! Pretty straightforward. As usual, let me know if you have problems.

crap

20 Aug
2011

Don’t update your theme if you’re working off the master. Make a child theme. Hence…my website sucks now. dangit. Well…it shall remain themeless unless I find a backup somewhere. Hmmmm.