Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

We have converted a static site to a Wordpress site with a theme which we designed and built. However, not having a massive amount of Wordpress experience we don't know how to approach this problem.

Our site has several pages, all of course using the page.php template. That's working fine for the content. But every page has a bulleted list within it (it's a different set of bullets for each page).

enter image description here

The website owner will want to edit both the content of the page (OK) and also the bulleted list.

Not experienced enough in Wordpress to know the best approach for this. It's not really a sidebar (as I understand it). Does it need a plugin? Is it normal to instruct the website owner that he'll have to use <li> tags (plus class names and some divs and spans) in his page content? Or is there a solution using some PHP to call up the right bullets for the right page? Should it be a widget?

This can't be that unusual a problem so what's the normal solution?

share|improve this question
6  
Try a metabox and a shortcode to render the output. –  toscho Jun 15 '13 at 8:27
    
@toscho thanks, i've taken a look at shortcodes and metaboxes. the only thing is, the help for metaboxes/shortcodes is all about developing your own plugin. we're not developing a plugin. are they relevant to us? –  hawbsl Jun 15 '13 at 10:49
    
@toscho ... for example ... your functions t5_register_extra_metabox etc i don't even know where they go. do they live in my theme's functions.php? –  hawbsl Jun 15 '13 at 10:51
    
Just take the code and make a separate plugin. When you import the old data, put the content of your boxes into a post meta field named _t5_extra_box. –  toscho Jun 15 '13 at 10:52
1  
@hawbsl: You don't need to get complicated or fancy when creating a plugin. The reason to set it up this way is because it protects your client for the future: WHEN they decide to install a new theme, the [shortcode] and metabox will continue working as expected. You don't need to worry about publishing the plugin to wp.org, or updates or anything; it's just a separation of concerns. Themes should handle styles (what those checklists look like) while plugins handle data (including where that data goes inside the content). –  guiniveretoo Dec 9 '13 at 18:20

6 Answers 6

Generally since WordPress' biggest selling point is it's content management, what clients want the most are sites they can edit without any code in the way or any chances that they might break something - so putting html in the text editor beyond unordered/ordered lists is bad practice and defeats the point of making content easy to manage.

Judging by the image you provided as an example, it looks like these bulleted lists aren't inline with the rest of the content as well so you're going to need html to get that layout. To keep the html outside of the text editor and keep editing as clean as possible for you and your client, I'd suggest to stop relying on page.php and make your own page template.

In the template, you can lay out any html you need and use the loop to call anything in the main text editor. Without using plugins, you can take advantage of custom fields or with a plugin, having a Magic Field where they can edit their bulleted list. Having your template assigned to each page, calling the page content and the list coming from a field will grab the content only from that specific page. And it will also eliminate any complicated HTML in the text editor by leaving it in the template wrapped around your loops and functionality.

If you really, really don't want the client to have to write any html at all, even uls/lis, if you're using Magic Fields and your own template, you can make a field that can be duplicated on the WP Admin and use a foreach with PHP in your template. Something like this:

<?php if ( get_field('list-item') == TRUE ) : ?>
<!--This checks to see if your client is writing anything in this field, if not, your html won't show on the template at all, it'll be cleaner this way -->
<ul>
<?php $listItems = get_field('list-item');
  foreach($listItems as $listItem) {
    echo "<li>" . $listItem . "</li>";
  } ?>
</ul>
<?php endif; ?>

This example is explained more on the Magic Fields 2 Wiki under "Working with groups, duplicate groups and duplicate fields". Basically it's taking the fields from that page, and with every duplicated field, it will wrap it in an li. And if your client doesn't use the field at all, the if statement around the entire thing will just hide the HTML completely on the front-end. Hope this helps to put you in the right direction. Good luck!

share|improve this answer

Simply click the 'list icon' in the WordPress visual editor to create a list, then surround the list in 'Code view' with <div style="float: right"> ... </div>

Probably the most user-friendly way of doing this would be to create a new visual editor button which creates the <div> and list for you. Your user would then simply add each list item...

share|improve this answer

In comments you have few good ideas for complex solution, but if your client is moving a static site and won't change lists very often, you should consider simply wrapping lists in a div/aside with custom css class.

Adding more complex solution is not necessarily good thing. Especially if lists contain relative links to site content. With simple aside+css you can easily move content in the future to new site/theme without plugins/additional code etc. Shortcodes/metaboxes etc. break this content/mechanic separation, so IMHO should be avoided when possible.

<aside class="gs-pull-right">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</aside>

<style>
.gs-pull-right {
    border: 1px solid black;
    float:right;
    width: 300px;
}
</style>

If lists content should be dynamic, and for example show last 10 posts, using metabox+shordcode's is best way to do it.

share|improve this answer

This is a solution you can provide to your client, using, as already said, a metabox. You can copy/paste this in your functions.php :

add_action( 'add_meta_boxes', 'bullet1545_add_custom_box' );

add_action( 'save_post', 'bullet1545_save_custom_meta_box' );

function bullet1545_add_custom_box( $post ) {

    add_meta_box(
        'Bullet Meta Box', // ID, should be a string
        'Side List', // Meta Box Title
        'bullet1545_custom_meta_box_content', // Your call back function, this is where your form field will go
        'post', // The post type you want this to show up on, can be post, page, or custom post type
        'normal', // The placement of your meta box, can be normal or side
        'high' // The priority in which this will be displayed
    );

}

function bullet1545_save_custom_meta_box(){

    global $post;

    // Get our form field
    if( $_POST ) :

        $bullet1545_custom_meta = esc_attr( $_POST['bullet1545-custom-meta-box'] );

        // Update post meta
        update_post_meta($post->ID, '_bullet1545_custom_meta', $bullet1545_custom_meta);

    endif;

}

function bullet1545_custom_meta_box_content( $post ) {

    // Get post meta value using the key from our save function in the second paramater.
    $bullet1545_custom_meta = get_post_meta($post->ID, '_bullet1545_custom_meta', true);

    echo '<label>Custom Meta Box:</label>
    ';

    echo '<textarea name="bullet1545-custom-meta-box">'.$bullet1545_custom_meta.'</textarea>';

}

This will provide you a textarea in your post edit page.

Frontend

Now in your page.php, you could use that code :

<?php 

$myBullets = get_post_meta(get_the_ID(), "_bullet1545_custom_meta", true); // retrieve the content of your metabox

echo '<ul>';
$textareaData = '<li>'.str_replace(array("\r","\n\n","\n"),array('',"\n","</li>\n<li>"),trim($myBullets,"\n\r")).'</li>'; // this line converts all the lines that are inside your textarea in li lines, removing empty lines
echo '</ul>';

?>

I hope that it is as clear as possible. With this solution, you don't have to maintain a plugin as well and the website owner won't have to use li tags.

share|improve this answer

This is fairly straightforward by enabling editor styles. It adds a styles dropdown to the editor which lets you easily add class names to specific elements.

Add the following to your functions.php:

// pushes the style select dropdown into the list of
// TinyMCE controls on the 2nd line of the toolbar
add_filter( 'mce_buttons_2', 'custom_mce_buttons_2' );
function custom_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

// this adds items to the styles dropdown we just added.
// The options in the array control how it works, you can
// add styles that wrap content in a block or inline element
// with a specific class, you target specific elements only
// and more
add_filter( 'tiny_mce_before_init', 'custom_mce_before_init' );
function custom_mce_before_init( $settings ) {

    // array of items for styleselect dropdown
    $style_formats = array(
        array(
        'title' => 'Bulleted list',
        'selector' => 'ul',
        'classes' => 'alignright big-bulletted-list'
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}

Full tutorial here: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/

In order for the client to see the changes this makes you can add an editor stylesheet. Again in your functions.php use:

add_editor_style('editor.css');

In that editor.css you could then add appropriate styles eg.

.alignright { float: right; }
.big-bulleted-list { padding: 20px; list-style: none; }
.big-bulleted-list li { padding-left: 20px; background: url(bullet.png) no-repeat left center; }

Codex page on editor styles is here: http://codex.wordpress.org/Editor_Style

share|improve this answer

You can wrap your bullet lists using a div in text editor and then style the div accordingly. No need to create meta boxes or shortcodes. For example:

<div class="blright">
  <ul>
    <li>List Item 1</li>
    <li>List Item 1</li>
    <li>List Item 1</li>
    <li>List Item 1</li>
    <li>List Item 1</li>
  </ul>
</div>

Then simply style the class accordingly. In our example, something like this will float the lists right to the text.

.blright {
  float:right;
  width:auto;
  max-width:30%;
}
.blright ul {
  width: 100%;
  display:block;
  list-style: none;
}
.blright ul li{
  list-style: disc outside url("images/li.png");
}

JSFIDDLE
http://jsfiddle.net/rCaCw/2/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.