Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is my working solution...</p> <p>Delete the 'Project Colors' and 'Project Names' custom fields from the custom template, (sigh), register a custom taxonomy called 'Project Classes' and assign the newly registered taxonomy to the custom post type, see <a href="http://sixrevisions.com/wordpress/taxonomy/" rel="nofollow">here</a>. In the Wordpress interface, give each custom post its appropriate 'Project Class' bananas, apples etc, again explained in the above link.</p> <p>However there is still the problem of how to show a color key for each custom taxonomy entry. I reused the Project Class names as style sheet names so I could give each style name a background-color. However the real Project Class names have capital letters and spaces which need to be removed to make them style sheet friendly.</p> <p>Add a php function <code>rename_projects</code> in functions.php that amends the spaces and capital letters in the 'Project Class' taxonomy name and makes it suitable for a css style name, I used...</p> <pre><code>// Rename Projects custom field for css styles function rename_projects($sProjectName) { $sFind = ' '; $sReplace = '-'; $sAmended = mb_strtolower(str_replace( $sFind, $sReplace, $sProjectName )); return $sAmended; } </code></pre> <p>Now you can use your Project Class names as style sheet names.</p> <p>Next, in your page template display your custom taxonomy thus... </p> <pre><code>&lt;?php $args=array( 'taxonomy' =&gt; 'projectclass', 'orderby' =&gt; 'name', 'order' =&gt; 'ASC' ); $categories=get_categories($args); foreach($categories as $category) { $sColorName = rename_projects($category-&gt;name); // To lower case and replace spaces echo '&lt;div class="legend-color ' . $sColorName . '"&gt;&lt;/div&gt; // Color style name &lt;div class="legend-project"&gt;' . $category-&gt;name . '&lt;/div&gt;'; // Taxonomy name } ?&gt; </code></pre> <p>So now for example a <code>$category-&gt;name</code> "My First Project" has a corresponding style sheet name <code>my-first-project</code> which you can add to your style sheet and style. Note that in the <code>&lt;div class="legend-color '</code> I am <em>adding</em> the style name to the existing class so the resulting class will be "legend-color my-first-project": i.e. two styles. The hard coded class "legend-color" holds all the style attributes except background-color which is in <code>$sColorName</code>.</p> <p>Working fine here.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload