Visual/HTML Editor Issues with Text and Images

Question

Hi,

This is my first WordPress site and so a newbie to WordPress 3.

I'm currently developing a site for a client and I am faced with the following issues/concerns with regards to WordPress Pages that have a Default Custom WordPress page template assigned to them, that I have created.

In actual fact, the whole theme I created was from Starkers Theme.

The concerns are:

1) For my About-Us page, I have placed all my CSS styles in my custom page template that the About-Us Dashboard Page points to but have entered my RawHTML that I created and tested in a browser prior to placing it into the Page HTML Editor, which is using the RawHTML plugin.

The problem is, on first pasting my HTML code using start raw and end raw tags, all looks fine in preview mode but not in the Visual Editor - all format is lost.

Furthermore, when I edit the text in the Visual Editor, my whole layout is all messed up. Why? Concern here is, I eventually would like my client to do all updates to text but if it jumbles all up, then what's the point of using WordPress as a CMS?

Don't get me wrong pls, I think WordPress is great and I really hope I am doing something wrong being a newbie but I would really like to ensure that any changes does not mess up the rest of the page format, which it seems to.

2) Adding and removing images also seem to mess the page format and again don't understand why? If I have an image aligned to the right and am using WordPress Image uploader to replace an existing image, again the page format is messed up.

The only way around this, is to have external html files where you make the changes and then copy and paste this back into the Page HTML Editor, which again defeats the purpose.

Can someone pls help me with this as my client has given me all the content they initially require in MS Word format but I am having alot of difficulties getting the format correct based on above issues.

Bottom line is, I want my client to update all content in all my WP Pages but I also want to make sure that if he does (text and/or images) does not break the page formatting.

Thanks.

FROM Adam's Response:

Hi @Adam,

I really appreciate your detailed reply and hope you can further assist me in my queries….please, inorder to get me passed this hurdle I am having at the moment with regards to dynamic content that I would like my client to change without spoiling existing page content.

Based on your response and as mentioned, I have used the Starkers Theme, I have actually done what you have suggested, that is, I have created a specific template page for my About Us page called About-Us.php, where I have then created an About-Us page in my WP dashboard, under pages and then assigned this template to it.

So this is the area that I am unsure about and need help on, so that I understand the process, i.e. the Dynamic Content.

My client has provided me a MS Word document of the content (formatted text with styling) he wants in this "About-Us" page, together with two images the he wants aligned to the rright-most of the page.

Now based on this content that he wants and my About-Us.php page template, where do I place this content so that he has all the correct styling and layout required by my client, which will also allow him down the track, without contacting me, to make changes to his content as well as to his two images (i.e. change images), without spoiling/jumbling the current page format, that is, the way he has presented the content in his MS Word is the way I want the actual site to look, even when he makes manual changes to?

1) How would this be done using a custom About-Us.php page template?

2) Where is the content from his MS Word placed in WordPress - in the dashboard page(html/visual editors) or in the About-Us.php page template that has style CSS defined?

3) Where can my client then go and edit the Page content (text/images) and ensure that formatting is not lost?

Adam, I really hope you can come back on this for me based on the above queries as I am at a loss with how to get the content into WordPress and how to ensure that page formatting is not lost after any updates are made.

Thanks.

Answer 1

Not 100% sure what you are doing but posting all the page's html into the HTML editor is not good as far as my experiance goes

If you open up the core files (best to create child themes - but for wordpress newbies this can seem complex) you can edit certain pages. wp-content > themes > yourtheme

in header.php you can put ur external css links in there, as well as javascript. (an example would be - dont touch the php)

<script type="text/javascript src="<?php bloginfo('template_directory'); ?>/library/js/jquery.js" "></script>

style.css is the main stylesheet that everypage u make will use unless told otherwise

If you have your own design (i.e. not using some1 elses theme) you can either edit page.php to put all the static html / php into it and use page hooks to get dynamic content. Or you can create a specific template page for each page.

to do this you create a new .php file and call it template-something.php and put this at the top of the page:

 /*
 Template Name: Choose A name
*/

then in the wp dashboard, under edit page.. on the right there is an option to select a template. your new page should be there and any changes u make to it show up.

in a bit of a rush, so sorry i cannot post links. just keep reading things online and you will pick it up fast. p.s. I use Hybrid as a theme.. it strips everything allowing you to code your own theme easier.. and has loads of hooks (give wordpress hooks and filters a google)