• Registered: 04-09-2012 UTC
  • Posts: 108

Topic: 2 call to action buttons?

Is it possible to get so I can have 2 call to action buttons? If possible, how do I get to it on the website. I would love to have them side by side and happy on admin side of it is that I simply want to adjust the text and the link.

My PHP knowledge is very limited, but little do I know  hmm

  • From: Chicago
  • Registered: 07-30-2011 UTC
  • Posts: 10,495

Re: 2 call to action buttons?

Hi,

First you need to install a Child Theme, any Theme customizations needs to be in that form see http://themeid.com/forum/topic/581/vide … ild-theme/

Now to have a second button you'll need to copy home.php to your Child Theme folder and add this:

<div class="call-to-action>
    <a class="blue button "href="http://example.com">Call to Action 2</a>
</div>

That's it you're all set!

Emil

Falkens wrote:

Is it possible to get so I can have 2 call to action buttons? If possible, how do I get to it on the website. I would love to have them side by side and happy on admin side of it is that I simply want to adjust the text and the link.

My PHP knowledge is very limited, but little do I know  hmm

Emil Uzelac's Website

  • Registered: 04-09-2012 UTC
  • Posts: 108

Re: 2 call to action buttons?

I'm on it to be in here somewhere but I am not really sure the link works.
Because I got the code when the button is turned blue and I renamed it but when I added the link to the PHP page I wanted the button would link to it where there is no link.  hmm

Would you or someone else might show me how it should look like, I hope I learn along the way. Many thanks so far, Emil!

<?php $options = get_option('responsive_theme_options'); ?>
            <?php if ($options['cta_button'] == 0): ?> 
    
            <div class="call-to-action">
            <?php $options = get_option('responsive_theme_options');
            // First let's check if headline was set
                if (!empty($options['cta_url']) && $options['cta_text']) {
                    echo '<a href="'.$options['cta_url'].'" class="blue button">'; 
                    echo $options['cta_text'];
                    echo '</a>';
            // If not display dummy headline for preview purposes
                  } else { 
                    echo '<a href="#nogo" class="blue button">'; 
                    echo __('Call to Action','responsive');
                    echo '</a>';
                  }
            ?> 
            
            </div><!-- end of .call-to-action -->

Br Jonas

  • Registered: 04-09-2012 UTC
  • Posts: 11

Re: 2 call to action buttons?

Falkens wrote:

I'm on it to be in here somewhere but I am not really sure the link works.
Because I got the code when the button is turned blue and I renamed it but when I added the link to the PHP page I wanted the button would link to it where there is no link.  hmm

Would you or someone else might show me how it should look like, I hope I learn along the way. Many thanks so far, Emil!

<?php $options = get_option('responsive_theme_options'); ?>
            <?php if ($options['cta_button'] == 0): ?> 
    
            <div class="call-to-action">
            <?php $options = get_option('responsive_theme_options');
            // First let's check if headline was set
                if (!empty($options['cta_url']) && $options['cta_text']) {
                    echo '<a href="'.$options['cta_url'].'" class="blue button">'; 
                    echo $options['cta_text'];
                    echo '</a>';
            // If not display dummy headline for preview purposes
                  } else { 
                    echo '<a href="#nogo" class="blue button">'; 
                    echo __('Call to Action','responsive');
                    echo '</a>';
                  }
            ?> 
            
            </div><!-- end of .call-to-action -->

Br Jonas

<?php $options = get_option('responsive_theme_options');
            // First let's check if headline was set
                if (!empty($options['cta_url']) && $options['cta_text']) {
                    echo '<a href="'.$options['cta_url'].'" class="blue button">'; 
                    echo $options['cta_text'];
                    echo '</a>';
            // If not display dummy headline for preview purposes
                  } else { 
                    echo '<a href="#nogo" class="blue button">'; 
                    echo __('Call to Action','responsive');
                    echo '</a>';
                  }
                echo '<p></p>';
            ?>  
            
            </div><!-- end of .call-to-action -->
            <?php endif; ?>         
        <div class="call-to-action">
                <a class="blue button" href="http://example.com">Call to Action 2</a>
        </div>

This is how it has to be done.
I added an "echo '<p></p>';" because the buttons where too big to be shown in the same line. You can change it accordingly.

  • From: Chicago
  • Registered: 07-30-2011 UTC
  • Posts: 10,495

Re: 2 call to action buttons?

The reason why I didn't tell you to add this in PHP because that's harder and you mention that you are not good with coding. And it would not show in Theme Options anyways.

Just this:

<div class="large">
    <a class="blue button" href="http://example.com">Call to Action 2</a>
</div>

after or before:

<?php $options = get_option('responsive_theme_options');
            // First let's check if headline was set
                if (!empty($options['cta_url']) && $options['cta_text']) {
                    echo '<a href="'.$options['cta_url'].'" class="blue button">'; 
                    echo $options['cta_text'];
                    echo '</a>';
            // If not display dummy headline for preview purposes
                  } else { 
                    echo '<a href="#nogo" class="blue button">'; 
                    echo __('Call to Action','responsive');
                    echo '</a>';
                  }
                echo '<p></p>';
            ?>  
            
            </div><!-- end of .call-to-action -->

Will make a nice large call to action button like this:

http://f.cl.ly/items/3f2K0939474601240Q0j/Screen%20Shot%202012-04-09%20at%207.23.06%20PM.png

No need to bother with PHPs if that's not easier for you.

Emil

Falkens wrote:

I'm on it to be in here somewhere but I am not really sure the link works.
Because I got the code when the button is turned blue and I renamed it but when I added the link to the PHP page I wanted the button would link to it where there is no link.  hmm

Would you or someone else might show me how it should look like, I hope I learn along the way. Many thanks so far, Emil!

<?php $options = get_option('responsive_theme_options'); ?>
            <?php if ($options['cta_button'] == 0): ?> 
    
            <div class="call-to-action">
            <?php $options = get_option('responsive_theme_options');
            // First let's check if headline was set
                if (!empty($options['cta_url']) && $options['cta_text']) {
                    echo '<a href="'.$options['cta_url'].'" class="blue button">'; 
                    echo $options['cta_text'];
                    echo '</a>';
            // If not display dummy headline for preview purposes
                  } else { 
                    echo '<a href="#nogo" class="blue button">'; 
                    echo __('Call to Action','responsive');
                    echo '</a>';
                  }
            ?> 
            
            </div><!-- end of .call-to-action -->

Br Jonas

Emil Uzelac's Website

  • Registered: 04-09-2012 UTC
  • Posts: 108

Re: 2 call to action buttons?

Lifts an old thread but how do I get all the buttons the same size regardless of the length of the text on it?

See here
http://vaxmora.se/

  • From: Chicago
  • Registered: 07-30-2011 UTC
  • Posts: 10,495

Re: 2 call to action buttons?

You can try min-height:150px just for the start and adjust any way you need.

Emil

Falkens wrote:

Lifts an old thread but how do I get all the buttons the same size regardless of the length of the text on it?

See here
http://vaxmora.se/

Emil Uzelac's Website

  • Registered: 04-09-2012 UTC
  • Posts: 108

Re: 2 call to action buttons?

Thanks Emil,

where do i find the info regarding the button? So I do the change at the right place  neutral

  • Registered: 04-09-2012 UTC
  • Posts: 108

Re: 2 call to action buttons?

I was changing to this

.xlarge a.button {
    font-size:24px;
    padding:12px 55px;
}

Is it possible to add a fixed with to this class OR maybe add a brand new class where it is possible to adjust the width of the button regardless of the size of text.

  • From: Chicago
  • Registered: 07-30-2011 UTC
  • Posts: 10,495

Re: 2 call to action buttons?

So whatever class you used add min width with to it, not max what I mentioned above like:

.xlarge a.button {
    font-size:24px;
    padding:12px 55px;
    min-width:150px;
}

Emil

Falkens wrote:

I was changing to this

.xlarge a.button {
    font-size:24px;
    padding:12px 55px;
}

Is it possible to add a fixed with to this class OR maybe add a brand new class where it is possible to adjust the width of the button regardless of the size of text.

Emil Uzelac's Website