Using getChildHtml() to add a block in footer.phtml [SOLVED]

Question

I found a lot of similar titles but none of them help me out of my issue.

I'm about to insert a block into the footer section on all pages so I added below code at the end of:

app/design/frontend/company/theme/layout/local.xml

just before the </layout> tag.

<!-- Instagram Scroller -->
<default> <!-- to display on all pages -->
    <!-- if name="head" exists then put in the existing tag -->
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/instashow/jquery.instashow.packaged.js</name></action>
    </reference>

    <reference name="footer">
        <block type="core/template" name="instascroller_script" template="instascroller/script.phtml"/>
    </reference>
</default>

And I put my content in

app/design/frontend/company/theme/template/instascroller/script.phtml

Then I put below code in

app/design/frontend/company/theme/template/page/html/footer.phtml

<div class="instascroller">
    <?php echo $this->getBlockHtml('instascroller_script'); ?>
</div>

Then Flush the cache

---- SOLVED ----

Thanks to everyone who viewed, commented, answered this question.

First of all, I should place the <reference name="footer"> in the <default> tag. This solved my issue of not appearing on all pages.

Secondly, I should put <action method="addItem"> in the existing <reference name="head"> tag but I mistakenly created another one.

At last, I forgot to flush the cache.

I updated my question and wish this can help others.

Again thanks to everyone.

Answer 1

The handle you are using belongs to a specific page, so your content will be showing on instagram/scroller page only. Please check it on the page.

For displaying it on all pages, Please call it using the following code.

<default>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/instashow/jquery.instashow.packaged.js</name></action>
    </reference>
    <reference name="footer">
        <block type="core/template" name="instascroller_script" template="instascroller/script.phtml"/>
    </reference>
</default>

You have placed the template file at wrong path.Please put the template file at the following path:

app/design/frontend/company/theme/template/instascroller/script.phtml

Clear the cache for the changes to be displayed.

Answer 2

1) Your are missing in your layout handle

<instagram_scroller> //here the layout handle is not correct, it should be like something like <instagram_scroller_index>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/instashow/jquery.instashow.packaged.js</name></action>
    </reference>
    <reference name="footer">
        <block type="core/template" name="instascroller_script" template="instascroller/script.phtml"/>
    </reference>
</instagram_scroller>

2) The layout handle is constructed like this: <routerName_controllerName_actionName>

3) You are also missing in template path, you put it in: app/design/frontend/company/theme/template/instascroller/script.phtml instead app/design/frontend/company/theme/instascroller/script.phtml

4) You put a JS file in : skin/frontend/company/theme/js/instashow/jquery.instashow.packaged.js

5) And use <?php echo $this->getBlockHtml('instascroller_script'); ?>