[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 757
  • Last Modified:

Best Strategy for Customizing Generic Word Press Links

We are building a new web site and using Word press for the blog.

The designers have given us the templates for the blog theme where specific css classes are applied to things that are generated automatically by word press. These CSS selectors/rules are all in the main "styles.css" that apply to the whole site, not just the blog/theme.

 All the little widgets and controls like comments, edit, next, previous etc...  that are need for every post and every blog page have some defined class but the dom elements in their template  are not necessarily a match for what is generated by WP

Some of these I can wrap in a div and apply a class and it works. others have a class automatically generated from with WP php code that "clobbers" my class. soooo....

My question here is one of strategy/best-practices .

Example from the designers we get things like:

<a class="action" href="#">Continue Reading</a>
                                                
<a class="action comments" href="#">6 Comments</a>

etc.

in the case of the comments it was simple just wrap the PHP in a div and apply the classes:

      <div class="action comments" ><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>
                                          

this worked fine...

But this does not work for the Edit link button

      <div class="action><?php edit_post_link('Edit', '', ' | '); ?> </div>

because the edit-post-link PHP generates it's own class: and we have this as output:

<div class="action>
<a class="post-edit-link" href="http://our-new-domain.com/blog/wp-admin/post.php?post=4&amp;action=edit" title="Edit Post">Edit</a>
 </div>

Open in new window


I have two choices... I can go into the main style sheet and add "post-edit-link" to all the CSS selector rules which now just select ".action"  (there are lot of them!)

OR

I can hack the php edit_post_link file or handler, to change the class.

OR  

is there a some other way which I would like be enlightened on... to customize all these small generic blog widgets/links through some settings GUI where I could set the class that is generated by:

<?php edit_post_link('Edit', '', ' | '); ?> </div>

to "action" so that we get this output:

<a class="action" href="http://our-newdomain.com/blog/wp-admin/post.php?post=4&action=edit" title="Edit Post">Edit</a>

as a custom setting that would be preserved over and upgrade?

The first option seems safest, but it messy, because it adds more bloat to the main css file, OTOH, I suspect if I touch the edit_post_link script, then when we up grade WP this will get over written and I lose it.

What is recommended?
0
Sivakatirswami
Asked:
Sivakatirswami
  • 2
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
It's been a while since I worked in Wordpress, but a Child theme comes to mind. Where you only make edits to files that need the edits. That way when you upgrade, you may or may not only have to update a small number of files that you changed.

The other technique would be to add a different selector to the action rules, so you don't have to make any changes to the php template:

for example if you have:
.action{
   color:red;
}
you can combine them so that you can use both selectors:

.action, .post-edit-link{
  color:red;
}

it doesn't create that much more bloat..
0
 
Jason C. LevineNo oneCommented:
You are correct in your approach to edit the main styles.css and target specific classes or tags inside the container.  WordPress has one commandment: Don't Hack The Core.  If you edit the handler in the core, you lose the edits on the next upgrade.   Use custom functions, hooks, filters to do stuff like that.  

Code bloat shouldn't be a huge concern unless you are applying huge chunks of new CSS code.  A k here and a k there usually doesn't hurt.

A child theme is always a good idea if you are concerned about the parent theme being updated and blowing away your customizations.   In this case, it sounds like you are in control of the parent so there is little benefit to adding a child.  You don't get a performance increase with a child theme because you are usually importing all of the CSS from the parent anyway and then just adding your customizations.
0
 
SivakatirswamiAuthor Commented:
OK, that's what I needed to hear... as it turns out I don't know why I was so concerned. I only had to add selectors to two rules:

.action,
.action-bg,
.post-edit-link { /* call to action items */
      background: url(/assets/img/arrows-action.png) 0 -40px no-repeat;
      padding-left: 20px;
      font: 700 12px ff-meta-web-pro, sans-serif;
      text-transform: uppercase;
      letter-spacing: 1px;
}

.action:hover,
.action:focus,
.post-edit-link:hover,
.post-edit-link:focus
 {
      background-position: 0 -85px;
}
0
 
Kyle HamiltonData ScientistCommented:
i'm not sure how the accepted answer differs from the answer I posted before it. You are doing exactly what I suggested.
0
 
SivakatirswamiAuthor Commented:
Yes, but I already knew how to do that.. that was exactly my first option as stated in my original post where I wrote:

"I have two choices... I can go into the main style sheet and add "post-edit-link" to all the CSS selector rules which now just select ".action"  

This was an obvious, easily understood, already known solution.

i.e. all you did was echo what I had written: "The other technique would be to add a different selector to the action rules," yes, already asked and answer in my original post.

It was not a matter of not knowing how to do anything, but a question of strategy, choice of best practices; and to find out if there was a way to easily adjust the css for these small WP blog controls through some kind of settings (as an alternative to touching the site's main style sheet) which there is not and a child theme is really not where I want to go...adding more files to the frame work adds more spaghetti. And Jason clarified that it was not going to get us anything anyway.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now