Support » Fixing WordPress » Convert static HTML into editable area

  • Resolved motownjoe


    Hello- I apologize if this has been answered somewhere already, but I’ve spent hours Googling solutions, and everything I’ve found doesn’t seem to apply to what I’m looking for.

    I’m new to WP, but a proficient HTML/CSS developer My starting point is the Bones theme.. I’ve taken a design, and sliced it up into HTML/CSS. The design is a single-page, responsive design, which can be seen here. (Not completely done, but enough to get the point.) I’ve cut out each section into its own php include, and have everything included from the index.php theme file.

    Quite simply, what I’m trying to do is turn each content area of static HTML into something that the client can edit with the Tiny MCE editor through the WP admin interface. For example, the client wants to be able to use the editor to update the menu, rather than going to Appearance > Editor and having to update the HTML. Everything I find tells me to build out more sidebar widgets, or pages/posts. I can’t imagine I’m the first person to do this, so I’m assuming I’ve just been searching for the wrong things.

    Any help would be greatly appreciated! Thank you!

Viewing 10 replies - 1 through 10 (of 10 total)
  • To display the content of the Tiny MCE editor you need to add <?php the_content(); ?> to your index page.

    There is a bit more involved than that to getting the site up and running though.
    I’d suggest viewing some tutorials on the subject, because it really isn’t as easy as you are wanting it to be.

    You should be creating menu’s dynamically by registering a menu:

    And this will display the menu:

    Maybe download a free theme and see how they do things.

    Thanks for the quick response!

    I think I may have misspoke when I said “menu” though. The site is a Baked Goods site, and when I said “menu” I was referring to the shop’s actual food menu, so I’m not sure those links are relevant to what I’m looking for? I’m just trying to turn each block of content on my page that I currently have as hard-coded static HTML into something that the user can interface with through the MCE editor.

    I did try adding that line of PHP to my index page, but I’m not sure where the editor should be appearing in my Admin panel? I’m not really even sure where to find the index page itself in the Admin panel. I can only find pages/posts.

    Create a page (call it anything) and type something into the TinyMCE editor. Now visit the page you have just created and see if something shows up.

    Yes, that does work, but I don’t believe that’s what I’m trying to do. My entire “site” is just one page, with a nav at the top that jumps to anchor linked sections throughout the page. It can be seen here. I don’t want to publish new pages or posts (unless I need to be doing that for what I need). I just want to take the static HTML that I have dropped into the index.php file, and turn it into something the client can edit. Like editable content divs throughout the page.

    Well that would involve creating custom fields for all of the little ‘bits’ of content.

    First, create a page called home or index or whatever.
    Go to Settings > Reading and set the ‘Front Page displays as’ option to a static page and choose the page you just created.

    Install the Types plugin so that you can add custom fields –
    Follow the instructions for creating custom fields. These will be the editable ‘blocks’ on your html/index page.

    So for the Classic Cookies menu item you would create a Title custom field (calling the field slug ‘cookies_title’), a description field and a price field.

    The below code pasted into the index file would then display the content your client has written into the custom field called ‘cookies_title’.

    <?php if (!((get_post_meta($post->ID, 'wpcf-cookies_title', TRUE))=='')) { echo get_post_meta($post->ID,'wpcf-cookies_title',TRUE); } ?>

    That should be a start.

    It’s not the prettiest technique, but it appears as if this will work for me!

    Thank you so much!

    You can just copy-and-paste the HTML code into the editor window in ‘Text’ mode. That way it will be stored and displayed like that. You will probably have ot make some adjustments for WP’s and TinyMCE’s handling of the formatting, but that’s really all that you need to do unless there’s something special about the HTML that you’ve written so far.

    If you wanted to get more hard-core WP-ish, you could always look at creating your own plugin or admin area to manage menu items. If it was me I’d consider setting up a custom post type and taxonomy(ies) to order the menu items and section them into the different categories. It’s a lot more involved then just editing a bit of HTML code, but I’ll guarantee that it will make life easier for your client when they can enter only the basic stuff that they need to and not have to worry about breaking the pages styling.

    If I’m understanding you correctly, it seems like what you’re saying is just a cleaner way to do what pressingprojects suggested? In that, the Admin tool would be more neatly organized, with categories for each section? I’d still, on some level, be dealing with the TinyMCE editor though, correct?

    Do you know of any good tutorials or links that might help me with what you’re suggesting?


    Create your first WordPress Custom Post Type

    Just bea in mind that this is pretty programming intensive, so it will look like it’s a huge mess of junk at the start, but if you follow it through you’ll be able to see what it’s doing.

    There’s other ways of doing it as well, and they would involve you setting up your own admin pages, saving your own values and being able to output them to the page.

    Neither way is really that hard when you get into it and understand how it all works, but it can be daunting to start off with.

    Great, I’ll give it a go. Thank you!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Convert static HTML into editable area’ is closed to new replies.