Tag Archives: layout

Customizing a Page on WordPress

It’s always recommended to be consistent with your site’s look and feel. However, there may be a time when a page calls for a unique look and feel. Be it you homepage, or a special landing page, or a complex form. For those cases there should be a way to customize a unique page without affecting other pages’ appearance, and indeed, there is. In fact, there are at least two.

WordPress has a theme hierarchy. Which means that whenever a page is loaded, the system detects its type, and calls for a ceratin template file from your theme directory. If that file is missing, WordPress will fall back to the next in line.

For page display, WordPress will look for a theme file called page.php, however it will look first for a file called page-NN.php, where NN be the pages id.

So if your special page’s ID is 44, create a file in your theme’s directory, called page-44.php, and use it to customize your page layout. Even better would be to save the page.php file as page-44.php. That way you already have a base that you can start work on.

You can also create a file named page-my-new-landing-page.php, where “my-new-landing-page” be your special page’s slug. Yes, before WordPress looks for a page-NN.php, it looks for a page-SLUG.php!

Read more about WordPress theme hierarchy here.

Using a theme file

Sometimes you need to customize not just one page, but a couple of pages. For example, a series of landing pages. In this case, you will be better off setting a special template file to rule them all.

First thing: Create a file in your theme directory, and give it a name. For instance: “landing_page.php”.

Open the file with your favorite text editor and add these lines:

/**
* Template Name: Landing Page Them
* A custom page template for landing pages
*/

The “Template Name” bit is the identifier of this theme.

Once this is done, go to the back office and create or edit a page. When the page is open for editing you will notice on the right hand side the “template” drop-down menu. From this menu you can now choose your new template for this page, and others.

How to Change the Total Upsell Products in a Row in Magento

If you add additional up-sell products to your product, they are displayed in a table, at the bottom of your product’s view page. By Default they are set 4 in a row, but this can be changed.

Locate the file app/design/frontend/your_package_your_theme/layout/catalog.xml, or copy it from the tefault package if it doesn’t exist under your package layout folder yet.

In this file look for the block that starts with <block type="catalog/product_list_upsell"...

Change the line <action method="setColumnCount"><columns>3</columns></action> to read <action method="setColumnCount"><columns>4</columns></action> (when 4 is your desired total in a row), and you’re good to go!

If you want to make further changes to the block’s HTML – the template file is located here: app/design/frontend/your_package_your_theme/template/catalog/product/list/upsell.phtml.

How to use Media Queries in CSS for Building Fluid Layouts

Apparently, as discussed in Zoe Gillenwater’s blog, there’s a pretty neat way to address different clients’ layouts using different media queries.

For instance: if we want to move our navigation block to the side with windows wider than 1024ox. This is done like so:

@media screen and (min-width: 700px) {
#main-nav {
float: left;
}
}

Read all about this and more in Zoe Gillenwater’s blog

How to Change the Product Default Page Layout from 2 Columns to 3

The default layout for the product page is 2 columns: content and right. You may want to change it, so this is how it’s done:

Locate the catalog.xml file under your theme/layout folder. If you can’t find the file, copy it from the basic package.

Scroll down to the section named: <!--
Product view
-->

There, on the first block that is nested within the <catalog_product_view> tag, locate the line: <action method="setTemplate"><template>page/2columns-right.phtml</template>

Change this line to: <action method="setTemplate"><template>page/3columns.phtml</template>

Refresh the page - you're done!