Member Avatar for Violet_82

Hi all, I have recently built a website using wordpress and I have noticed that wordpress adds some classes to my html tags automatically. I asked for support in their forum, but nobody got back to me, so I was hoping somebody could she some light on this?
SO I have added some images to the website using the html tab in wordpress, and all worked ok. Then when I added more images, this time using the "visual tab" wordpress squeezed in extra classes:
SO here's the offending page:
http://www.andychristodrums.co.uk/?page_id=15
Look at the thumbnails, they all looked the same except the last one which has a funny border.
I added them all manually except the last one which was inserted using the upload/insert function under visual tab in the editor. If you check the code the offending picture has a new class coming from nowhere (in italic, between one *)here's the code:

<div class="thumb"><a title="Andy photos" href="http://www.andychristodrums.co.uk/?page_id=277"><img *class="alignnone size-full wp-image-334" title="cropped pic amir" *src="http://www.andychristodrums.co.uk/wp-content/uploads/2012/06/cropped-pic-amir3.png" alt="" *width="97" height="73"* /></a></div>
Why wordpress keeps adding classes to it? where is this code class="alignnone size-full wp-image-334" title="cropped pic amir" ...width="97" height="73"

the extra bits are: (class="alignnone size-full wp-image-334" title="cropped pic amir" and width="97" height="73")
Compare the above to any other image added manually:
<img src="http://www.andychristodrums.co.uk/wp-content/themes/twentyeleven-child/images/thumb_template_8.jpg" alt="">
For my friend this is a big big problem because he doesn't know any html so he needs to insert images using the visual tab as opposed to the html. How do I make sure that wordpress stops adding these extra classes?
I posted this in the javascript section because I believe there is some script in wordpress that might create this extra class?
thanks

Edited by Violet_82
  • 4 Contributors
  • 15 Replies
  • 238 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for jstfsklh211

border is from css i forget where

under advance when inserting the image you can set border 0 for the image

Member Avatar for Violet_82

thanks, where is the advanced option (please see screenshot wordpress )

thanks

Member Avatar for jstfsklh211

right click on image and select properties should be under advanced

Member Avatar for EvolutionFallen

As a general rule (unless they've fixed this, which it seems they haven't), you shouldn't switch back and forth between HTML and Visual view for a given post. So if you have a post or page you created in HTML view, keep working on that page in HTML view. If you have a different post you created in Visual view, always update that page in Visual view.

That being said, the extra classes are what WP adds based on your selection in the Upload/Insert box. The easiest solution to your problem would probably be to copy the HTML from the other images that are coming out fine, then replace the URL in the src attribute with the one for the last image (in this case, http://www.andychristodrums.co.uk/wp-content/uploads/2012/06/cropped-pic-amir3.png).

Edited by EvolutionFallen because: Corrected a typo.
Member Avatar for Violet_82

EvolutionFallen, really? Is it a bug in wordpress? Uhm, I didn't know that. It will be a bit of a problem to stick to one one "view" only because I created the website using the html view panel and my friend - who knows nothing about html - will use the visual view to update it. I guess I will have to explain him how to copy, paste and change the html. It's a shame there is absolutely nothing about this bug anywhere. Now, let me ask you then, does this happen only with images or with other things as well? Say I have a page where my friend whants to add some videos, are they going to end up with a border as well?

Member Avatar for EvolutionFallen

It's not a bug. It's an intrinsic issue in the idea of WYSIWYG editing for the web. HTML elements are oftentimes invisible in text (such as div, span, p vs br, etc.). So if your layout for a page is dependent on HTML structuring, when you switch to Visual mode you'll lose some of that control. Someone who's careful and aware of the issues can usually mitigate problems that could arise from this.
Fortunately, if your HTML in the post is mostly just the images, then you shouldn't have a problem. You can remove the borders from the Visual panel. Click on the image in the Visual editor. In the top corner of the image two icons will appear. One allows you to edit the image. If you click it a popup appears with a couple of tabs. I think under the Advanced tab there's a Styles section, and you can set the Border to 0 there. This is what @jstfsklh211 was refering to above.

Member Avatar for Violet_82

ah, thanks, I tried to remove the border, went to the advanced tab as you said but there is no border. What I found though is that there is a "class name" field which has "alignnone size-full wp-image-334" in it: I removed that and left it empty and the border is gone!! Darn wordpress!!! I wonder if wordpress keeps adding classes everywhere when switching from visual to html view...

Member Avatar for gavinflud

WordPress does this a lot when you switch between visual and html views. If you stick with the visual editor, it will have to add it's own elements and classes where it deems them necessary. If it's generating an unwanted class on your site that is causing a styling issue, you'll probably have to override that style in your css file.

From my experience, WordPress adds a lot of unnecessary classes to images (that are added using the visual editor). It also adds in paragraph tags a lot when you switch between the html and visual editor.

Member Avatar for Violet_82

thanks, that's really awful, if I had known that beforehands I wouldn't have chose wordpress to be honest. ANyway, it seems that removing the unwanted classes from the advanced properties works ok too, so might stick to it for now, it might be easier for my friend to implement
Also strange that on the wordpress forum nobody was capable of telling me that, I don't mean to slag them off of course, but I very disappointed to be honest
cheers

Member Avatar for gavinflud

It's actually not too bad, once you know about it before starting your website you're able to style the classes and ids the way you would like, preventing WordPress from altering them. Once you get used to the fact that it generates it's own classes and ids, it actually becomes quite helpful to have all these extra identifiers on elements of a page.

As for the WordPress forum, I'm a member there (albeit not a very active one anymore) and they are occasionally very helpful. My only criticism is that the number of people looking for help vastly outweighs the number of people able to help others.

Glad you solved your problem anyway.

Member Avatar for Violet_82

thanks gavinflud. As per giving ids and classes to your elements, yes totally agree with you but it is a bit difficult, at least for me that I have used wordpress once, to 1)determine where worpress inserts his own classes, I mean, it happened with images, and somebody else said on paragraphs as well, and 2)what the classes do to the element. So you will have to see first what the added worpress class does to the element to then cook up a rule to neutralize it. Take my image in the code above: it doesn't have an id because I really didn't need it there, but having seen that the wordpress adds a border to it, then I will have to add an id to it and have border:none; to override the wordpress class, or just delete the added class - eh eh once I know how to do it is is quite easy - from the advanced property. I don't know, but to me it seems unnecessary to have all these added classes.

thanks

Member Avatar for gavinflud

This may help you when it comes to the classes WordPress generates from the visual editor: http://codex.wordpress.org/CSS#WordPress_Generated_Classes

When building a site, just try and include these styles and edit them to suit yourself. That way you'll be in total control.

As for the other classes and elements it generates, most of them will do nothing. They are only there to provide you with extra identifiers. The only way they will change the style of your site is if there is a corresponding style defined in one of your website's stylesheets.

Member Avatar for Violet_82

thanks, that's useful! So, just so i get this right, you're suggesting to add all those classes to my custom css correct?
cheers

Edited by Violet_82
Member Avatar for gavinflud

Yep, exactly. Add those classes to your CSS and modify the borders, padding and margins in them whatever way you see fit.

Just make sure you keep rules like float: right; inside the .alignright class, so that will still work when someone aligns something to the right in the visual editor.

Other than those style rules, WordPress shouldn't change any other styles in your site. The extra classes it generates are usually just useful for easier selection of elements.

Member Avatar for Violet_82

ok fab, thanks a lot for your help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.