Theming Magento: php

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s200/theming-magento-icon.png" width="200" /></a></div>
<div style="text-align: center;">
 </div>
So today I was trying to customise the nav bar of my Magento store, just like any other front end developer, I turned on my <a href="http:/#">template hints</a>, and navigated the file Topmenu.phtml. 
 
File path: app/design/frontend/package_name/theme_name/template/page/html/topmenu.phtml 
 
But to my surprise, this is all i found. 
 
 
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; color: #e69138; font-family: inherit; font-size: 15.0667px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;"> echo $_menu;</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; color: #e8bf6a; font-family: inherit; font-size: 15.0667px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; font-style: inherit; font-weight: inherit; outline: 0px; padding: 0px; vertical-align: baseline;"></pre>
</pre>
 
"Ah! Where are the ul and li tags?" well not to worry i did some digging, and found a .php file responsible for populating the navigation bar (Topmenu.php). 
 
File path: app/code/core/Mage/Page/Block/Html/Topmenu.php 
 Before editing this file, you need to copy it your local folder... if you do not have local/ create it under app/code/ 
 
copy to File path: app/code/local/Mage/Page/Block/Html/Topmenu.php 
 
This is where the variable $_menu is declared and populated. 
 
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;">
</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;">protected $_menu;</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;">
</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">public function getHtml($outermostClass = '', $childrenWrapClass = ''){</pre>
<pre style="color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </pre>
<pre style="color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">}</pre>
</pre>
<pre style="background-color: #2b2b2b; border: 0px; box-sizing: border-box; font-family: "dejavu sans mono"; font-size: 11.3pt; outline: 0px; padding: 0px; vertical-align: baseline;">
</pre>
 
Sometimes Magento can get tricky at first glance, but this is what this blog is here for, to help you get started. If you found this article to be informative, let me know below on the comments section or leave a question.

So today I was trying to customise the nav bar of my Magento store, just like any other front end developer, I turned on my template hin...

How to customise the Magento navbar (Topmenu.php vs Topmenu.phtml)