One of the key reasons why developers may choose to integrate a website into WordPress is the ability to make it maintainable by the user. And most people who get their sites created would prefer if it things like copy and images were editable. If none of the content is editable at all, then what WordPress has to offer isn’t being fully taken advantage of.
As I’ve recently begun learning Magento, I realized that my goal has remained the same. In spite of Magento being a more complicated platform to learn in the backend, how can I make content editable for the user? This is where I started thinking like WordPress and looking to see how I can achieve the same concepts in Magento.
Loops, Static Blocks & Pages
WordPress is made up of editable Posts and Pages. When working in WordPress, it uses Loops within theme files where Page or Post content can be called in it’s most basic form using:
<?php the_content(); ?>
More about this here.
Focusing on the ability to edit, in Magento’s CMS section, we can use pages and static blocks. You can find this section on the admin area once you’ve logged in, and on the top menu, there should be an option called CMS. CMS reveals a drop down menu and the first two options in that drop down are pages and static blocks. Let’s begin with static blocks.
I like static blocks because they’re good for text/images and can be used both in a page or a theme file you’re working in. I’ve used static blocks to call a set of external links into the footer or to make the content in a page easily editable without the HTML in the user’s way, and to reduce chances of anything crucial being accidentally deleted.
After creating a new block, you can use the identifier as a reference when calling this block elsewhere. Let’s pretend that our new block is called “contact-text.” The identifier and the name of the block don’t have to match, but the identifier should be without spaces and lowercase. There are two ways to call our new block.
If you are inside of a page or product description’s WYSIWYG editor, you can call it this way:
{{block id='contact-text'}}
If you are inside of a theme file, for example, let’s say we’re inside of header.phtml and we want to call this static block, we’d call it this way:
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('contact-text')->toHtml() ?>
Now that we know how to take advantage of blocks, what about Pages? What’s good about pages is that there’s more freedom to change the design/layout and it’s best used when you need an entire page rather than with static blocks. Static blocks cannot be accessed via browser whereas page names are appended to the end of your store URL.
So if your page’s URL Key is called “contact” and your store URL is www.mystore.com, to see this page in the browser, it would be www.mystore.com/contact. Pages are also a better place to insert HTML that wraps editable text in a static block. Another awesome feature that Magento pages have similar to WordPress is that they have version control – meaning that if this is enabled and changes are made, but you don’t like the last published changes, you can revert to an earlier published version of that page.
To create a new page, on the admin side of Magento and on the top navigation, go to CMS -> Pages -> Manage Content. On the upper right side of the screen, we’ll see an Add New Page button.
Here we can name our page, set this page to “published” or “disable,” which in WordPress terms would be “published” or “draft,” respectively. And if you enable “Under Version Control,” you can take advantage of being able to make changes and having backups every time you publish. This works similarly to WordPress’ “revisions” feature, which lets you restore from a previous version of the document.
Dynamic Urls
Another cool trick I learned is the equivalent for WordPress’ get site URL:
<?php echo site_url() ?>
This in WordPress is only useful inside of a theme file, and will not work inside of page or post content. Magento, however, not only has an equivalent for when inside of a theme file, but it also can be used in the CMS.
This WordPress version gets the site URL and can be added to make a new path – this prevents links from breaking when the site is moved, for example:
<a href=”<?php echo site_url() ?>/category/press”>Press Posts</a>
Magento has a similar trick. Inside a page, a static block and anywhere where there is a WYSIWYG editor (which makes it a CMS area), we can get our Magento store URL like this:
{{store url=''}}
This will print out the site URL normally and to add to this URL to navigate to another page, for example, our Contact page we made earlier using the URL key “contact,” it would be written like so:
<a href="{{store url='contact'}}">Contact Us</a>
If the path continues from “contact,” then the backwards slashes would be appended:
<a href=”{{store url='contact/more.html'}}”>Contact Us</a>
Now that we’re taking advantage of this inside of the CMS, what about when inside of a theme file? When inside of a theme file, the base URL is what gets the URL of your Magento site:
<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>
In Conclusion
From what we’ve gone over thus far, we’ve discovered how to call static blocks and pages to make our site’s content editable for users, and how ensure the content/theme URLs are a bit more friendly in case the site moves from desktop to live or from domain to domain.
These are just a few techniques to keep site content user editable and easily managed. If you’re feeling adventurous, here are some more shortcuts to browse through:
Magento: Get Base Url and More
May all your WordPress and Magento sites continue to be happily dynamic. Enjoy.
Related articles:
