• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Modify Centric Pro Theme: Replace Scroll Down Arrow With Text Button

One of the latest HTML 5 child themes for StudioPress is named Centric Pro. In this post, i’ll answer a question relating to customizing the Centric Pro theme. Here’s the question:

Hi,
I would like to replace the arrow button on the homepage with a text button. Any ideas?
Thank you,
Tom

Here’s the default which uses the arrow:

Centric Pro Theme

If you open up the home.js file located inside the js folder of the Centric Pro theme, you’ll find this Javascript code:

What you need to do is change the code on line 8 so the entire code block looks like this:

Here’s the result:

Replace Scroll Down Arrow With Text Button centric pro

Basically all we’ve done here is swap out the class for the arrow Dashicon with a class for the button. The class for the button will use your themes existing CSS to style the button so no extra CSS code is needed.

From this:

To this:

A simple and effective solution don’t you think?

Add Arrow Icon To Button

Another option is to add a arrow icon before your button text using Dashicons. Here’s the result first and then the code:

arrow icon using dashicon before button text

And here’s all the code:

Reader Interactions

Comments

  1. James Hahn II says

    January 25, 2019 at 8:11 am

    How would you go about adding the Centric Pro button to another theme. Namely, Parallax Pro? Is it as easy as switching .home-featured & .home-widgets-1 to .home-section-1 and dropping in the home.js? Or is it more involved than that?

    Log in to Reply
    • Brad Dalton says

      January 27, 2019 at 5:45 pm

      There’s a bit more involved. You’ll also need to add the PHP to load the jQuery and CSS to add and position the arrow. And, you’ll need to modify the js and HTML for the first widget in the front page template.

      I’ll publish a tutorial on this soon. Here it is https://wpsites.net/web-design/add-centric-pro-scroll-arrow-to-parallax-pro/

      Log in to Reply
  2. Brad Dalton says

    November 2, 2014 at 8:59 pm

    Members only http://wpsites.net/registration/

    Log in to Reply
  3. Warren says

    November 2, 2014 at 12:00 am

    Hi Brad,

    This is awesome! But I was wondering, how to create two buttons (side by side) instead of just one? I’m creating a job board site — one button links to job seekers and the other button to post jobs.

    Also, if I want to change the colors of these buttons, should I just do that in CSS?

    Thanks again,
    Warren

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.