Best Strategy for Customizing Generic Word Press Links

Posted on 2012-09-16
Last Modified: 2012-09-17
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>


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=";action=edit" title="Edit Post">Edit</a>

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!)


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


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=";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?
Question by:Sivakatirswami
    LVL 25

    Expert Comment

    by:Kyle Hamilton
    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:
    you can combine them so that you can use both selectors:

    .action, .post-edit-link{

    it doesn't create that much more bloat..
    LVL 70

    Accepted Solution

    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.

    Author Closing Comment

    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:

    .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;

          background-position: 0 -85px;
    LVL 25

    Expert Comment

    by:Kyle Hamilton
    i'm not sure how the accepted answer differs from the answer I posted before it. You are doing exactly what I suggested.

    Author Comment

    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.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: : Click on Too…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now