How to create a select element option (drop-down) menu in the WordPress Theme Customizer

David Nash css, php, wordpress 2 Comments

I’m working on a project that requires the same basic theme for two companies that are both under the same group. The only real difference is the logo and theme colours. Instead of creating two separate themes and having to maintain them separately I used WordPress “customize_register” action in the theme’s functions.php. The official docs are here and very long and confusing. WordPress provides some basic types like a text field, image upload and colour picker, but no select menu: Here’s the code I’m using to create a select element with two options (in the theme’s functions.php file): …

Use curl and PHP Simple HTML DOM Parser to inject WordPress into another page

David Nash css, html, php, wordpress 3 Comments

I was recently asked to create a WordPress theme that would run on its own server but be integrated into a larger e-commerce site that was running in a separate CMS. The headers and footers for the site change frequently and the WordPress theme needed to insert itself between the two. The basic outline to tackle this problem is: Create a template in the CMS with an empty content area, and set up eg /blog so that instead of using the CMS it  loads content from the WordPress server. Create a WordPress theme that uses the built-in curl library to read …

WordPress Theme Development Quick Start

David Nash css, html, php, wordpress Leave a Comment

I’ve created plenty of WordPress themes based on designs from clients. This is the process I usually follow. 1. Create a static HTML and CSS template. I create index.html and style.css. 2. Install WordPress 3. In the WordPress folder wp-content/themes/ I create a folder with the name of my new theme. 4. Copy my static HTML to the new theme folder. 5. Modify style.css, add the WordPress stylesheet header: /* Theme Name: THEME_NAME Theme URI: YOUR_WEBSITE Description: THEME_DESC Version: 0.1 Author: YOUR_NAME */ 6. Rename index.html to index.php. Open index.php and replace the reference to style.css with < ?php bloginfo( ...

New WordPress theme for my site

David Nash css, wordpress 3 Comments

I’ve been meaning to update my website’s design and layout for a long time. My site is based on WordPress and the theme I’d been using previously was a little too sterile. I wanted something that was more of a portfolio site and yet could still accommodate a blog. After sporadic searches through the free WordPress themes on offer, I decided none of them quite did what I wanted, so I designed my own. I wanted to keep it minimal while making use of emerging web technologies like HTML5, CSS3; and I wanted the site to look just as good …

Pixel Perfect Firefox Extension

David Nash css, xhtml Leave a Comment

When I write HTML and CSS I’ll usually create a mockup – I take a high quality JPG of the design and put it into a very simple page that shows the JPG, centered on the screen. Then in Firefox I switch back and forth between the page I’m working on and the mockup so that I can get the design pixel-perfect. Well today all that will change. I’ve discovered the Pixel Perfect Firefox Extension which allows me to overlay the mockup over what I’m designing.  You can set the opacity and quickly toggle the overlay on and off. I’m …

1px high DIV in IE6

David Nash css, xhtml 2 Comments

Very occasionally I’ll use an empty DIV for decoration, and in CSS use height: 1px. In IE6 to make this work you need to put comments inside the DIV, otherwise it’ll display at the height of the font you’re using. <div class=”line”></div> becomes <div class=”line”><!– –></div> You don’t need any line-height fixes in the CSS. Yes, it’ll add to your markup a bit, but you should probably be explaining why you’re using meaningless, empty DIVs anyway.

Minimal sIFR3 demo

David Nash css Leave a Comment

I like sIFR, but it really bugs me that I have to read through an entire tutorial to get something really basic up and running. This is a simple sIFR3 demo, using the basic cochin.swf file and an almost minimal amount of code to see it in action. Download my minimal sIFR3 demo here. I believe you’ll need to upload it to a webserver to run it, you won’t just be able to open the index.html file to see it working.