Top Right APP button – can we use HTML?

[elleeye]

Greetings!

We’d like to use some HTML provided by Apple on the website. We’re currently using it in several places that accept HTML. We’d like to use that awesome top button option and put that HTML code in there that they provide right there at the top.

What’s the best way of accomplishing this?

Thanks so much,
Lisa & Staff

[Raghavendra]

You can either modify the file header.php around line number 58 to insert the HTML or you can insert the following code into custom/custom-functions.php file –

$prefix = mo_get_prefix();
add_action("{$prefix}_start_header", 'mo_display_button', 9);


function mo_display_button() {
    echo "Test"; /* Pls change this to echo desired custom HTML here */

}

[elleeye]

Going to try this now, thank you!

[elleeye]

Okay, I tried what you suggested, but got some funky code at the top of the site. I’ve taken it down, and put the original back.

I’m attaching a screenshot of what I saw and the code. Perhaps there’s something here that needs to be changed to make it work.

[Raghavendra]

This reply has been marked as private.

[Raghavendra]

BTW, I had tested the code earlier in another installation. Probably the error you encountered is because of the copy-paste issue or you are probably missing the php wrapper tag –

http://www.php.net/manual/en/language.basic-syntax.phptags.php

[Raghavendra]

You should now see two buttons – one for appstore and another for google play. Pls remove the google play if you do not need it.

The below are the changes I made –

1) Inserted the following code into custom/custom-functions.php –

$prefix = mo_get_prefix();
add_action("{$prefix}_start_header", 'mo_display_button', 9);


function mo_display_button() {

	$itunes_url = 'http://itunes.apple.com/'; /* Pls change this URL to the iTunes URL for the app */
        $google_play_url = 'http://play.google.com/';

        echo '
';
        echo '';
        echo '';
        echo '
';

}

and inserted the following into Custom CSS tab in theme options panel (can be inserted into custom/custom.css as well) –

/* Hide the existing get app button */
#header .button.get-app { display: none; }

.app-download-buttons img { margin: 15px 10px 0 0; max-width: 140px;}

.app-download-buttons { display: inline-block; width: 300px; float: right;}

.play-button img { border: 1px solid #aaa;}
.itunes-button img { border: 1px solid #252525; border-radius: 4px;}

#header.sticky .app-download-buttons img { margin-top: 5px; margin-bottom: 5px; max-width: 140px; }

/* Mobile layout */
@media screen and (max-width: 767px) { 
.app-download-buttons img {
margin-top:0;
max-width: 135px;
margin-right: 5px;
}
.app-download-buttons {
margin: 0 auto;
width: 280px;
float: none;
}

}

[Author]

Posts