Using media queries, we can define exceptions to the general 1024px+ screen size:

/* Smartphones ----------- */
@media only screen and (max-device-width : 768px),
       only screen and (max-width : 768px) {
	element.class { rule: value; }
	...
}

/* ipads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1000px),
       only screen and (min-width : 768px) and (max-width : 1000px) {
	element.class { rule: value; }
	...
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
       only screen and (min-device-pixel-ratio : 1.5) {
	element.class { rule: value; }
	...
}

You might also want to load an entire style-sheet conditionally, why not based on page (with php) AND screen size (@media):

<?php if( is_page(99)) { ?>
  <link rel="stylesheet" media="only screen and (max-width: 768px),
     only screen and (max-device-width: 768px)"
     href="css/mobile.css" />
<?php } ?>

Finally, place this meta tag for androit 2.2 (don’t ask):

<meta name="viewport" content="width=device-width" />

There are a lot of posts sharing methods to do this, but few really work. Try this one, it worked for me!

Set the location in the theme

Then make sure to assign the menu in WP admin and create your menu there.
This article has more details… and google has much more.

New query on regular page to display links to recent posts

Also read up on WP_Query, get_post_meta and the_post_thumbnail.

1. Download a backup of all the wp-content folder with FTP.
2. Download a backup of the entire database with phpMyAdmin
3. Create a new WordPress site on your new server (hopefully using ActionScript).
4. FTP up the wp-content folder contents to the new server.
5. Open the SQL database backup with a text editor like NotePad++
6. Find and Replace all occurrences of the old domain (http://olddomain.com/) with the new domain (http://newdomain.com/)
7. Import the database using phpMyAdmin
8. Refresh the Theme and the Permalinks.
9. Test, test, test!

When using WordPress as a CMS, Adal Design wants to insure that it is simple for clients to update their website. One frequent feature that often comes up in website development is the need for Master-Children pages other than those automatically provided by WordPress blogging.

Let’s image a client wants a Team page with a master page containing a list of team member thumbnails and names, each linking to the child page containing a larger image and a Bio. We want to deliver a site in which the client only inputs the image, bio and name once, having the navigation and master page updated automatically.

It can be tempting to use Posts for children pages and modify index.php to generate our master page. That would work fine, but then we lose the ability to implement a blog on the site.

2 solid solutions to creating our Master-Child Team section:

• Using Custom Post Types.
  This solution is the most solid, however it requires slightly more setup time.
• Coding a smart pageTemplate.php
  This solution will be quick to implement and is OK for small sites.

Creating a pageTeam.php Page Template

First, note that we didn’t name the file teamPage.php for alphabetical reasons.

We want to create a child page that looks like this:

What’s the functionality here?

The title at the top left will be same on each page, as well as the thumbnails linking to the various different team members.

However the content box in the middle and the image to the right will be specific to the child page (team member) we are viewing.

In WordPress English please…

There is only one pageTeam.php page template.

It calls the parent page’s page title, followed by a list of child small ‘post thumbnails’ linking to those child pages below.

In the middle it calls the_content() of the child page.

To the right, it calls a larger version of the post thumbnail.

How about some CODE?

1/ Register two image sizes in functions.php:

if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_image_size' ) ) {
  add_image_size( 'team-thumb', 50, 75, true );      // this one is cropped
  add_image_size( 'team-large', 200, 300, false ); // this one is resized
}

2/ In pageTeam.php, echo the parent page title, the children page thumbnails with links, and the current page’s content and large thumb.

Assuming the parent’s page ID is 16…

// Echo the Section Title (Using Parent Page Title) and hard code text
<h1 class="pageTitle"><?php echo get_the_title(16) ?></h1>
<p>Click on a teacher below to read a bio:</p>

// Echo list of thumb links to children
<?php $pages = get_pages(array('child_of' => 16)); ?>
  <?php foreach ($pages as $page): ?>
     <?php if ( has_post_thumbnail($page->ID)) {
     echo '<a href="' . get_permalink( $page->ID ) . '" title="' . esc_attr( $page->post_title ) . '">';
     echo get_the_post_thumbnail($page->ID, 'team-thumb');
     echo '</a>';
     } ?>
  <?php endforeach; ?>

// Call the content
<div class="entry">
  <?php the_content(); ?>
</div>

// Call the featured image (large)
<?php echo get_the_post_thumbnail($id, 'team-large', array('class' => 'team-large-image')); ?>

Now use your smarts, write any necessary extra HTML and CSS and create those child pages.

Don’t forget: the way we coded will require that every child page is assigned a post thumbnail. But no need to open Photoshop, WordPress will be doing all the cropping.

Top benefits cited include:

• An overall easier experience, especially for non-developers.
• A more friendly, diverse community.
• A more cost effective solution to web publishing and content management.

One challenge is to place content in different content boxes on a single page, to which there are 3 popular solutions:

• Switch to HTML view in the content box and place custom HTML and CSS.
  This method is terrible for the client because changing the content means potentially breaking the page’s layout and style. It’s by far the worst solution, sadly employed by many WordPress developers.
• Engineer complex sidebar and widget trickery.
  I’ve seen many themes that have dozens of sidebars registered to accomplish this task. It’s confusing for the client and takes long to set up. Sidebars should be used for exactly what their name suggests.
• Use custom fields and page templates.
  Custom fields allow users to save extra data in a page. With the use of get_the_meta() and pageTemplates.php, we can then echo that extra content however we please.
  This awesome solution is made 10x better by the fabulous plugin: Custom Field Template.

The concept behind the custom fields method.

The whole point of using custom fields is so that we can avoid placing important HTML in WordPress page content.

I often see WordPress developers placing  a <div class=”top-content-box”> and a <div class=”left-content-box”> directly in the content box using HTML edit mode. Instead, you should look at the amount of ‘content zones’ the page has and create as many custom fields (minus the main content zone that should use the_content() of the main content box). So instead of the HTML example above we would have two custom fields named top-content-box and left-content-box.

Then create a new pageTemplate.php, and place your divs with unique ID’s and classes there.

This ties into the wider concept of using page templates to write custom HTML, instead of placing it in WordPress page content: the most important concept to use WordPress as a high-end CMS.

Otherwise it will be confusing for the client trying to understand where his content is going to display. Remember: these sites must be editable by people who do not understand HTML and web publishing in general.

So do not hesitate to create several new pageTemplates.php in the theme if necessary to obtain the same results without placing HTML in the custom fields or content boxes in WordPress.

In some situations, you can differentiate how the page layout displays using smart CSS rather than creating a new page template, for example if there are two pages with the same amount of content boxes, but a slight difference in their position or background color.

How to use the Custom Fields Template plugin

Install the plugin

This part is easy:

• In WordPress, go to Plugins > Add New
• Search for Custom Field Template
• It should come up first. Click Install Now.
• Activate the plugin.

Now take a quick look to better understand

Edit ANY page on your site. Make sure that custom fields are made visible in the screen settings.
You now see a custom form instead of custom fields… this is an example of what we can accomplish.

Create a custom field template
Example 1: adding two more content boxes using a textarea field type

Now navigate to the plugin settings in Settings > Custom Field Template

Here we are going to edit the default Template #0

This default template is already populated with some example form fields. Take a few minutes to look at them and realize how they generate the form that you saw in the previous step.

For the purpose of this lesson, we will create the fields described above. Erase everything and paste the following:

[top-content-box]
type = textarea
rows = 20
cols = 40
tinyMCE = true
htmlEditor = true

[left-content-box]
type = textarea
rows = 20
cols = 40
tinyMCE = true
htmlEditor = true

The short code is fairly self-explanatory: we created two separate content boxes as custom fields.

[left-content-box]  // this is the [custom field name]
type = textarea     // this determines the type of form field
rows = 20           // vertical size of textarea
cols = 40           // horizontal size
tinyMCE = true      // textarea only: this enables the tinyMCE editing buttons
htmlEditor = true   // textarea only: this enables the Visual / HTML toggle button

Now all pages basically have 2 extra content boxes!

With this plugin, you can easily control where the custom field template appears: only posts, only pages, only pages using a specific pageTemplate.php or even only certain custom post types. It’s that’s powerful.

For our purpose, click on the link that says “Page Template file name(s) (comma-deliminated):” just above where we created our textareas. In the text field that appears, type pageTemplate.php

You can now click the big blue Update Options button to save.

Echo the textarea custom field in a page template

Now let’s create a new page template, that will have the file-name pageTemplate.php - this is case sensitive!

Wherever you see fit in the HTML structure, place these snippets of WordPress specific PHP:

<?php if ( get_post_meta($post->ID, 'top-content-box', true) ) { ?>
     	<div class="right-content-box">
<?php echo apply_filters('the_content', get_post_meta($post->ID, 'top-content-box', true)); ?>
        </div>
<?php } ?>

…and…

<?php if ( get_post_meta($post->ID, 'right-content-box', true) ) { ?>
     	<div class="right-content-box">
<?php echo apply_filters('the_content', get_post_meta($post->ID, 'right-content-box', true)); ?>
        </div>
<?php } ?>

Now your page template will look for those custom fields, and if they have content, it will echo that content, wrapping them in <div> elements with a unique class to distinguish them.

Note that we are echoing the custom field with this line:

<?php echo apply_filters('the_content', get_post_meta($post->ID, 'right-content-box', true)); ?>

We are applying the same filters as for the_content() template tag so that autop and everything else works the same… the clients doesn’t see a difference.

If we were working with a different type of form field type, like ‘text’ or ‘file’ things would be different, but we will cover that further down. For now, let’s bring our example to completion.

Test some content and live-edit your CSS

Now go edit some Sample Page in WordPress:

• Go to Pages > Sample Page > Edit
• Set the page template to our Page Template
• You will see two new content boxes in the “Custom Field Template” area below the content box, instead of the default form we saw after first activating the plugin
• In the top-content-box box, type “This is the top content box”
• In the right-content-box box, type “This is the right content box”
• Save your page and view it

You should now see two lines of text, respectively ”This is the top content box”, and ”This is the right content box”.
Now use firebug or the chrome element inspector to live-edit your CSS and make things look the way they should!

Example 2: Adding an extra featured image using a file type field

Something that comes up every now and then is the need for more than one featured image. One of the advantages of featured images, is that you can register a custom image size in functions.php and then echo the post thumbnail (just another term for featured image) at the size you registered.

This way WordPress does the cropping/re-sizing for your client automatically, and with custom page templates and CSS, the theme places it exactly where it belongs.

Using custom field template you can take advantage of this amazing functionality, for more than one featured image.

The process is almost the same as above.

Start by creating a new custom field template (if you are following this tutorial, use Template#1), and paste this short code in:

[second-featured-image]
type = file

Then create the pageWithTwoFeaturedImages.php page template, and inside it paste:

<?php
   $second-featured-image = get_post_meta($post->ID, 'second-featured-image', true));
   if ( $second-featured-image != '' ) {
?> 
<div class="second-featured-image">
   <?php echo wp_get_attachment_image($second-featured-image, 'custom-image-size'); ?>
</div>
<?php } ?>

Using multiple custom fields

With the custom field template plugin, you can create duplicate-able custom fields. This is very useful for example to create multiple slides on a page without having to register a custom post type the way Woo Themes does.

There is already an amazing article written on multiple custom fields, one of the only other well-written posts about the plugin, so I will simply send you there.

Other great posts written on the subject:

http://www.kevinleary.net/advanced-content-management-wordpress-custom-field-templates/

http://www.kevinleary.net/multiple-fields-groups-wordpress-custom-field-template-plugin/

http://www.kevinleary.net/7-ways-create-custom-write-panels-meta-boxes-wordpress/

I hope this article helped you, and if you work for Adal Design, start implementing today!

Because we want everything to work seamlessly for the client who doesn’t know HTML, we should focus on CSS instead when customizing the display of content in WordPress. This is the old concept of separating content (HTML) from design (CSS) applied to using WordPress as a CMS.

For example, we don’t want to place a class=”left-content-box” in an HTML tag in the page content. If the client erases this content and puts something else, he will never be able to make it look the same.

Instead of this:

HTML:   <h2>Bigger text</h2>

CSS:    h2.left-content-box { font-size: 120%; }

Try this:

HTML:   <div class="left-content-box"><h2>Bigger text</h2></div>

CSS:    div.left-content-box h2 { font-size: 120%; }

This way, the client can easily change content without losing styling.
The bottom line is that we want these websites to be fool-proof and future-proof.

Deciding between a new pageTemplate.php or more CSS rules for different pages

Something I will keep repeating constantly: CSS is more powerful than HTML for styling.

So we’ve already learnt to remove HTML from the content boxes which is good progress.
Instead we start writing more CSS rules in styles.css.
Now nothing is stopping you to write a little more CSS to distinguish some pages from each other even if they are using the same page template.

For example:

body.page-template-pagetwocolumns-php.page-id-86 #left-design-pages h1
  { padding-left: 30px; }

This will move the the header more to the right, on a given page, without creating a new page template.

It comes down a decision:

• Does this page deserve an entirely different page template?
  It has a very different layout, more content boxes, custom functionality.
• Or simply some extra precise CSS rules?
  There are a few changes just for style, there will be only one page that looks EXACTLY like it.

In the theme framework I use, and many others, there are so many distinguishing ID’s and CLASSes you can use to customize your CSS.
Be careful not to delete them, they often look similar to this:

<div id="post-<?php the_ID(); ?>">

They are used to give each post a unique ID for custom CSS styling.

My favorite way of building a website starts with installing the famous wordpress.org CMS on a bluehost.com shared hosting server. For convenience, I maintain a library of legacy themes with key features enabled to use as templates that can be easily customized.

One of the actions I like to include ‘on activation’  in most cases is the programmatic creation of a contact page.

The other cool thing I love to do since made possible by the genius of WPML, is to auto install my favorite plugins automatically when displaying the theme for the first time. I can even decide which plugins to install in advance by editing a simple text file and adding/removing zip files from inside my theme folder.

To use this tool, simply follow the instructions provided by the creators of this code:

How to include plugins with themes?

We’ve created a function that can be included in any theme which will automatically install and activateplugins. In order for this function to work correctly, the wp-contents/plugins directory must be writable by the web server (same requirement as for the auto-plugin update feature in WordPress).

Add the function to your theme

Download the iclt-resources code. This ZIP file includes the PHP functions that will extract and deploy the included plugins.

Unzip it and copy the folder ‘iclt-resources’ into the theme folder root.

Include the plugins that need to be deployed

1. In the ‘functions.php’ file of the template add this line at the end:

   include TEMPLATEPATH . '/iclt-resources/iclt-deploy.php';

2. Add the plugins ZIP files in iclt-resources/iclt-plugins
3. Add plugins information in iclt-resources/iclt-plugins/iclt-plugins.txt (on separate lines)

   plugin-archive.zip > [plugin-folder/]plugin-file.php

   • ‘plugin-folder’ has to match the plugin folder name from the archive.
   • ‘plugin-file.php’ is the name of the plugin ‘core’ file.

   e.g. for a one file plugin:

   plugin-archive.zip > plugin-file.php

How does it work?

When a user activates a theme that has bundled functions, the theme will attempt to install and activate the included plugins. Install will happen when the theme is displayed for the first time by a logged-in administrator.

If the theme cannot write to the plugins folder, it will issue a warning. You can change the folder write permissions and try again (just refresh the page).

Once installed, the theme will not attempt to update or reinstall plugins. The user can use the standard WordPress plugin management to update the plugins.

Good to know!

If some of your theme’s code relies on certain plugins being activated to render properly, you must comment those sections out until the WPML’s code does it’s magic.

Feel free to leave any comments about this method, whether you like it or not.

Steve created a plugin that gives developers the ability to customize the “meta fields” box in page/post edit. Trying to put pieces together from the information and links provided in the codex makes clear that this part of WordPress is simply under-developed.

With his WordPress Custom Fields plugin, Steve fills the gap and provides a tool to easily create custom fields that don’t intimidate the non-tech savvy.

Of course, as stated in his own post, the plugin is in beta, and there is one thing that still ain’t possible…

How to conditionally display options based on which Page Template was chosen?

I tried using Steve’s filter as such:

It is obvious though that this code won’t work because:

• You can’t test using the WordPress conditional tags inside a functions.php file…
• Even if you could, this particular case has me testing for which page template is selected… INSIDE THE EDIT PAGE, not the front-end.

So I guess question is really:

How DO you determine which page template is chosen on the EDIT side of a page?

Any suggestions are welcome!