I have recently been using the customizr theme in a project. One of the situations in that project required that I come up with a CSS solution. Which I present in this post.

There are a lot of solutions on the Customizr website, but not one for this yet. We'll see what comes of it.

I really appreciate these snippets, I find them really helpful. So I wanted to contribute my solution back to the community. I am not sure if it should be its own snippet or if it should modify the current snippet or perhaps modify another snippet "Change the color of the Featured Pages Buttons".

The Task: change the text in the "Featured Pages Buttons" on the front page so that each button could have a unique text.
Version of Customizr the solution works with: 3.1.5
Current state: The text "Featured Pages Buttons" on the main page is controlled via a single text input in the WordPress Customizr panel. This does not allow unique text call-to-action verbs to be used in the buttons. i.e. Download!, Get Help!, Connect Now!, etc. This means that theme users would have to use a single text option across the entire set of buttons.
Description of the challenge and the solution: The goal is obviously to grant flexibility to theme users to add the text they want to each unique button. The challenge was that there is not a unique CSS class or ID to individually target links styled as buttons on the main page. Existing CSS styles targeting buttons include:

btn btn-primary fp-button

. However these stiles are not unique to the individual buttons for each page. There is a style which is unique to each widget position:

div.fp-one

,

div.fp-two

, and

div.fp-three

. These styles can be used in conjunction with the

fp-button

class and the CSS Pseudo element

::after

to provide custom text in these call-to-action buttons.

Step 1. Remove all text from text box "Button text" in WordPress Customizer under the section "Front Page".

Step 2. Add a CSS statement for each box you want to add text to. Note that the

fp-xyz

class changes in each statement.

div.fp-one a.fp-button::after {
content:"YOUR TEXT HERE »";
}

div.fp-two a.fp-button::after {
content:"YOUR TEXT HERE »";
}

div.fp-three a.fp-button::after {
content:"YOUR TEXT HERE »";
}

While the above solution works well, in some situations it may be the case that the website owner will want to change the pages linked to from the main page. This may also mean that the text in the buttons should change. The following solution will allow unique targeting on a per page bases. This solution works by targeting the link's title attribute rather than the class of the containing div element. The advantage this method would be that once the style sheet is set up, a different site administrator can change the pages on the front page and an agreed upon text will appear in the button.

a.fp-button[title="UNIQUE LINK TITLE HERE (which also usually happens to be the same as the page title)"]::after {
content:"YOUR TEXT HERE »";
}

Note: that

::after

is CSS3 whereas

:after

is CSS2 syntax. The difference is IE8 supports only the CSS2 syntax.
Further suggestions: if the button text were presented to site admin as custom field with a metabox on each page then theme users could determine button text when crafting the page.

Credits: Nicolas' Guide to CSS and HTML in the Customizr WordPress theme was really helpful as was also Chris Coyier's The Skinny on CSS Attribute Selectors and ::after.