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.

I need a computer to run a dual screen setup (2 x 1600×1200).

I will be using Dreamweaver (or Aptana), Photoshop, Illustrator and multiple browsers simultaneously on a regular basis.

I kind of like Dell, so the computers I’m looking at are from that company but I’m open.

My budget is $1000 max

In the Small Business section

Dell Optiplex 790 and Precision T3500 companrison

In the Home Office section

Dell XPS_8300

Thanks for taking a look Susan!

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.

All of these tools have helped keep me organized and more productive. So here goes:

Harvest

This website allows you sign up for the “Harvest” online application (software as service). It is an AMAZING time tracking, billing and reports system. From collecting retainers to tracking project progress and business income, this tool is very easy to use and convenient. It also comes with all sorts of integrations with other technologies. Starting price for 1 user and unlimited clients is $12/mth

OutRight

This website also offers a software as service solution, for finances this time. I connects with your online banking portal and extracts data. The end result is a self-generated visual report on Profit/Loss as well as the ability to easily categorize all your income and expenses… leading to a self-calculated amount of taxes due (quarterly or yearly). This tool can also be used to connect with your harvest account, but I personally prefer connecting it directly to my business bank account. Starting price is $10/mth.

Google Apps

Google apps for business is just about the most affordable, reliable and flexible solution for business email, calendars, documents and a whole bunch more. From using Gmail for you @mydomain.com account to collaborating in real time on the writing of a document, it’s a priceless resource for tech-savvy business owners. I couldn’t live without it (or my android phone for that sake). Single user is free… business solutions start at $50/yr/user.

Insightly

Another software as service solution (like all above), this time for CRM and project management. There are two things I really like about this app. The first is that it offers, without the complication of something heavy like salesforce, a ton of functionalities that would normally be obtained by using several, non integrated solutions. Opportunity tracking, project tracking, email and attachments archiving, to do task lists (with the ability to create task sets and pipelines) and client database. It allows you to track all these things as well as all sorts of meta data to easily search through them. The other thing that I just LOVE about this app, is that it integrates SO WELL with Gmail and Google calendar. You can literally do your project management within Gmail. You get an email referral and just click the “save opportunity” button and enter the estimated price, chance of winning, close date etc right there and then. Same for tasks. Basic plan is free.

ManyMoon

An alternative to Insightly, Manymoon is more project management focused, so it offers a narrower business solution, but what it does, it does smoothly. It’s like basecamp but way nicer. It also integrates pretty darn well with Gmail. Basic plan is free.

Trello

I don’t even know where to start to describe the awesomeness of this web application I just discovered.
It is by far the most intuitive and fast application I have ever used in a browser. Though it has the limitations due to lack of maturity, what it brings to the table in terms of project organization and collaboration is revolutionary. You can literally click and drag cards through a pipeline, like swiping on your iThing.
Perfect for sales pipelines, large scope project management and much more. A gem to follow.

What I love about all these tools?