Magento merge sorter with pager on same line

A common question for Magento developers is how to merge the sorter with the pager on product listing pages so that they appear on the same line.

This effectively moves the drop down menu that says ‘Sort By’ inline with the drop down menu that says ‘Show X per page’.

For most custom themes, the template page does not exist and you need to make a copy of the initial base file in order to edit it (editing base / core files is not recommended so it always best to make a copy within your theme that overrides the base file).

The page that pulls out the sorter and pager is:

/app/design/frontend/default/YOUR-THEME/template/catalog/product/list.phtml

Here is the line that pulls out the required file:

< ?php echo $this->getToolbarHtml() ? >

Follow these steps to carry out the merge:

1. The file containing the required code can be found at:
/app/design/frontend/default/YOUR-THEME/template/catalog/product/list/toolbar.phtml.
2. Cut and paste the div code that has class ‘sorter’ to within the div that has class ‘pager’.
3. Remove the div reference ‘sorter’ or add your own style.