Would it be possible to use CSS for what you’re trying to achieve? If you added a class to each of your <a> tags, you could then style them differently from normal links:
<a href="#" class="button">Button</a>
and the CSS would be something like:
.entry-content a.button {
background-color: blue;
border: 1px solid black;
border-radius: 3px;
color: #fff;
padding: 10px 15px;
text-decoration: none;
}
.entry-content a.button:hover {
background-color: green;
}
Thread Starter
gh421
(@gh421)
Hey stephencottontail, thanks for the suggestion.
Would I have to change the links manually for each existing post with that method? As in editing each post, or would that be a global change and every link would be a button?
Thread Starter
gh421
(@gh421)
If it helps to see the site; In a post on http://www.androidcruze.com you’ll see I have a “download from market” text link that are unique for each post. Below that is a global “find this and more on google play” button that is not unique for each post, so I could place that in functions.php to be shown on each post. I would like to have the “download from market” as a button. Only have to run a “convert txt link to button function” once as all new posts will be buttons with the shortcode calls anyway. I really don’t want to manually change 300 odd posts to be a button if I can avoid it.
This is the code to style the button I am using (as suggested on another css help site):
/*GH Reference. Added below for buttons*/
.action-button a:link, .action-button a:visited {
border-radius: 5px;
display: inline-block;
font: 700 16px Arial, Sans-Serif;
margin: 0 20px 10px 0;
-moz-border-radius: 5px;
padding: 8px 8px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
text-transform: uppercase;
-webkit-border-radius: 5px;
}
.action-button .subtitle {
display: block;
font: 400 11px Arial, Sans-Serif;
margin: 5px 0 0;
}
.blue-button a:link, .blue-button a:visited {
background-color: #5E9CB9;
background-image: -moz-linear-gradient(top, #5E9CB9, #4E7E95);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5E9CB9), to(#4E7E95));
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95')";
}
.blue-button a:hover {
background-color: #68A9C8;
background-image: -moz-linear-gradient(top, #68A9C8, #598EA8);
background-image: -webkit-gradient(linear, left top, left bottom, from(#68A9C8), to(#598EA8));
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8')";
}
rather than manually going through each post and changing the link to run a button shortcode to style the link.
You could do a search and replace directly in MySQL (***), done in multiple steps. Assuming that the current HTML and the Shortcode will have a common URL in the middle (that will not change) which per your example is:
http://www.google.com/page1
Then you do a search and replace and replace the HTML prior to that with the shortcode text that is prior and then the HTML after also.
So:
<span style="color: #0000ff;"><a id="
is replaced with:
[action-button color="blue" title=Goto Google" subtitle="" url="
and then:
" style="color: #0000ff;" target="_blank" rel="nofollow"></a>Goto Google</span>
is replaced with:
"]
Assuming that the HTML being replaced is not used except where we need to replace it (first do a Search in MySQL), this should work.
*** Please make very sure you have a full and proper database backup prior to any direct edits in MySQL. ***
Thread Starter
gh421
(@gh421)
thanks pwd.
yes thought bout the db (mentioned that in my first post). I would just do it as a sql update query rather than search and replace, but I was hoping someone may have already written a function to do something similar that I could just use in the functions.php without messing directly with the db 🙂
