'Buy Album' button on front page

• 

  harpvoice · Member · Mar 24, 2017 at 12:16 pm

  • Copy link
  • Add topic to favorites

  Hi. My wordpress is an artist page. I’d like a button on the front page which re directs people to bandcamp where they can buy the album. Can you help please?

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Mar 25, 2017 at 7:17 am

  • Copy link

  Hi there,
  There are various methods to do this…

  Method 1: Adding a link to a Button Image inside Posts

  1. Create your button image in paint, gimp or photoshop.
  2. Add a link of the bandcamp page to that button image on your posts.
     Example:
     <a href="bandcamp.com"><img src="button.jpg" /></a>
     bandcamp.com need to be replaced with your bandcamp page and button.jpg needs to be replaced with your button image name.
  3. If you do not want to code, just follow the steps given here: https://en.support.wordpress.com/links/image-links/ just replace the image with your button image.

  Method 2: Adding a link to a Button Image on a Static Page

  • The drawback of the method 1 is that you may have to the button image on each of your posts, since it’s not a static page.
  • You need to setup a static home page if you want the button just to show up once in the home page.
  • You have to create a new page and set that up as a static home page and assign posts to a different page. Follow the steps given here: https://en.support.wordpress.com/pages/front-page/ to do that.

  Method 3: Use CSS

  • If you are familiar with HTML and CSS and do not want to use button images you can create a button without using any images by just coding it.
  • Example:
    HTML
    <a href="bandcamp.com" class="bandcamp_btn">CHECK OUT MY BANDCAMP PAGE</a>
    CSS

    a.bandcamp_btn {
      text-decoration: none;
      font-family: sans-serif;
      background: #629aa9;
      color: #ffffff;
      padding: 12px 18px;
    }

    The HTML defines the button element using the tag and the CSS code is used for styling the button element.
    Check out the above code live here: http://codepen.io/anon/pen/BWPyQN
    

  • Finally, use this CSS button in your static home page. More about adding a custom CSS here: https://en.support.wordpress.com/custom-css/

  I hope this helps :)