How to edit WP html using firebug?

buckapple · 08-08-2009, 12:13 PM

I hope someone can give me a little insight on this.

I've been using firebug in html view to look at my sidebar and I get the following view:

<div id="sidebar">
<ul>
<br/>
<a title="p2" href="http://garyleggett.com/?p=45">p2</a>
<br/>
<br/>
<a title="p1" href="http://garyleggett.com/?p=43">p1</a>
<br/>
</ul>
<li id="linkcat-2" class="widget widget_links">
</li>
<li id="text-3" class="widget widget_text">
</li>
</div>

As I scan over this code or the my index page, firebug will tell me where in the css editor the above code is pointing to.

In the code above p1 and p2 are blog posts in the sidebar, the widget links is the blogroll and widget text is the widget text.

What I want to do is either move the blog posts to the bottom of the sidebar listings or better yet not have them appear at all in the sidebar.

First question that may or may not help my problem is, how do you get to the html code that is displayed in the left of firebug?

I can see how to get to the css or header or footer.php on the right in the editors, but I cannot see where this html code is in my editors or anywhere for that matter. Since firebug lets me temporarily edit it, I would assume it is somewhere in the WP files.

2nd question, with me wanting to completely dump the posts from the sidebar (current theme places them there automatically) what would be a good way to do this?

Thanks in advance for saving my sanity.

Gary

Steve Diamond · 08-08-2009, 02:24 PM

Quote:

Originally Posted by buckapple

I can see how to get to the css or header or footer.php on the right in the editors, but I cannot see where this html code is in my editors or anywhere for that matter. Since firebug lets me temporarily edit it, I would assume it is somewhere in the WP files.

Right. It's in your theme directory, usually in the file named sidebar.php. But you shouldn't have to edit that because...

Quote:

Originally Posted by buckapple

2nd question, with me wanting to completely dump the posts from the sidebar (current theme places them there automatically) what would be a good way to do this?

The right way to do this is to go to the Appearance/Widgets menu in your WP administrative area. Assuming that your theme is properly widget-enabled, whatever widgets you choose to place on your sidebar or sidebars will override the default theme contents for the sidebar. Which is exactly what you're trying to accomplish.

Read the WordPress Codex for details.

Steve

nontemplates · 08-08-2009, 02:41 PM

If by dumping the articles in the sidebar you mean you want to remove the sidebar completely you will need to go into the code (like if you just want to do use wordpress for a sales page presentation). I'm thinking that that the posts in the sidebar might be hard coded not just a widget. If they are a widget then its as simple as Steve noted.

Let us know what theme you are using and we will be able to tell you exactly where the sidebar is called from and if the posts are hard coded in (not controlled by the widgets panel).

buckapple · 08-08-2009, 04:01 PM

Hello everyone and thanks for the answers.

I went to the Appearance/widgets when I first started and noted that it didn't affect the posts. So I assumed it was hard coded, so I did what you were eluding to, I found it in the sidebar .php and got rid of it.

So in working with firebug in the html view, what I think I'm seeing and maybe you guys can tell me if I have this right. The view in firebug's html view is not actually in one place like the css and php files it points to in the right columns, but is more of a summation of the html code that makes up the layout??

Because as I looked at the code I could tell it was in the sidebar but when I went to the sidebar the code wasn't exactly what the html had listed.

The theme is from a Internet Marketing course I got awhile back and doesn't have a name.

Steve Diamond · 08-08-2009, 05:00 PM

Quote:

Originally Posted by buckapple

So in working with firebug in the html view, what I think I'm seeing and maybe you guys can tell me if I have this right. The view in firebug's html view is not actually in one place like the css and php files it points to in the right columns, but is more of a summation of the html code that makes up the layout??

Because as I looked at the code I could tell it was in the sidebar but when I went to the sidebar the code wasn't exactly what the html had listed.

If I understand what you mean, then you're sort of on the right track. The code you see in any template file, sidebar.php for example, is a blend of PHP and HTML. The PHP is a programming language that runs on the web server before the server sends anything to your web browser on your computer. The PHP instructions tell the server how to generate a page or a part of a page in HTML.

So yes, in that sense the PHP file has a skeleton of what the HTML will eventually be. To understand the exact relationship, you have to be able to read PHP and you have to know something about the structure of WordPress and some of its important built-in functions.

Here's an example of some code that could have generated something similar to a portion of what you posted in your OP (this comes from the sidebar of a theme I happened to have lying around):

PHP Code:

 
<ul>

<?php get_archives('postbypost', 5); ?>

</ul>

That one line of PHP in between the ul tags tells the server to display a list of up to five recent posts from the blog archives in that spot.

Steve

buckapple · 08-08-2009, 05:29 PM

Hello Steve,

I understand php is a server side language.

My main question is as you look at firebug, and have the html tab highlighted it displays the html code in the lower left hand box. You have the option of either highlighting the html code in the box and watch on the upper screen which is your website light up if it is connected with that code or you can run your mouse over your site and watch the appropriate html code light up in the html lower left box.

At the same time it will point to the css files for instance in the right hand boxes or the php code if for example it's in the sidebar.php that is accessible through the editor in wordpress.

My question is and maybe you are answering it, the html code in the left hand box of firebug, where does that reside? is it in one place or is it a summation of the code that makes up the blog that holds it together, sort of like the container in css. Or can you go someplace, download a file to a script editor, open up in dreamweaver, whatever, how do you get to the html code in the left hand box or can that be done? Seems like it could since firebug lets you edit it temporarily to see how it affects the blog.

Thanks for your response,
Gary

PS the bass player in my jazz trio last name is Diamond : )

Steve Diamond · 08-08-2009, 05:53 PM

Hi, Gary. I thought I was answering it. I'll try again.

If you were looking at a site where the pages reside on the server as HTML rather than PHP files, then Firebug would be able to point at the actual source of the HTML that you see in your browser.

But in the case of a WordPress site this isn't the case. However, Firebug can't really tell the difference. It can just see the HTML and the CSS. They look just the same to the browser when they're generated "on the fly" by PHP before being served as when they're served directly from static HTML files.

So with a WordPress site you're seeing HTML that has been created at the time you requested the page by the running of many PHP files that make up the WordPress site. Each PHP file may supply a small portion of the HTML code. In the case we're talking about the instructions in sidebar.php create some of that HTML code.

But WordPress assembles it into one single page of HTML before it sends it to your browser. That particular page of HTML only exists for that fleeting moment. To your browser and to Firebug it looks like a single page of HTML. So that doesn't give you a way to trace it back to its source. You have to know the structure of your theme and the structure of WordPress.

By the way, I do know that there are additional linked pages of CSS and of JavaScript that come into the equation, but I'm leaving them out for simplicity's sake. The HTML looks like one monolithic page to your browser, but it has many sources.

I hope this helps.

Steve

houdy · 08-08-2009, 06:48 PM

Quote:

Originally Posted by buckapple

Or can you go someplace, download a file to a script editor, open up in dreamweaver, whatever, how do you get to the html code in the left hand box or can that be done?

No you can't open or edit it in an HTML editor. As Steve said what you are seeing in the browser or Firebug is a summation of multiple files brought together at that particular time according to what is being called for. You need to edit each individual theme file either directly in the theme editor in the WP dashboard, hosting account file manager or with a text editor.

Steve Diamond · 08-08-2009, 07:12 PM

Thanks, Jeff. You said in three sentences what took me numerous paragraphs. Nice job of cutting to the core without extraneous explanation.

Steve

buckapple · 08-08-2009, 10:14 PM

Hello Steve and Houdy,

Ok, got it, I was thinking it might be a "summation" thing but your technical explanation is right on. Thanks for taking the time to help me see the light.

I was able to tweak the blog to look real similar to a static site.

Gary

Pubster · 08-21-2009, 11:43 PM

Quote:

Originally Posted by houdy

No you can't open or edit it in an HTML editor. As Steve said what you are seeing in the browser or Firebug is a summation of multiple files brought together at that particular time according to what is being called for. You need to edit each individual theme file either directly in the theme editor in the WP dashboard, hosting account file manager or with a text editor.

So, that being said Is there any WYSIWYG Blog THEME Editor or Plug-in such as NVU for HTML that will allow you to view you Blog Page and move things around the way you want them and then the software chooses and edits the files needed to be edited (including Hard-Coded) because of the changes I made viewing my Blog. What a time saver that would be for us non-coders. I'm betting there is not simple software to do that. Now I'm not talking about the Widget Editor or code-editor in WP.
Thank you if you can direct me to something like that.........
Steve T (Pubster)

houdy · 08-22-2009, 07:40 AM

Quote:

Originally Posted by Pubster

So, that being said Is there any WYSIWYG Blog THEME Editor or Plug-in such as NVU for HTML that will allow you to view you Blog Page and move things around...
Steve T (Pubster)

I know of nothing like that. All WP themes are coded differently and even the individual theme files could be called something different. So writing a universal WYSIWYG editor for WP themes would be next to impossible. Maybe something could be coded for an individual theme. Some themes have many visual and structural options built into the dashboard but not really a WYSIWYG.

08-08-2009, 12:13 PM	#1
buckapple Gary Leggett War Room Member Join Date: Aug 2007 Location: TN Posts: 169 Thanks: 26 Thanked 19 Times in 11 Posts	How to edit WP html using firebug? I hope someone can give me a little insight on this. I've been using firebug in html view to look at my sidebar and I get the following view: <div id="sidebar"> <ul> <br/> <a title="p2" href="http://garyleggett.com/?p=45">p2</a> <br/> <br/> <a title="p1" href="http://garyleggett.com/?p=43">p1</a> <br/> </ul> <li id="linkcat-2" class="widget widget_links"> </li> <li id="text-3" class="widget widget_text"> </li> </div> As I scan over this code or the my index page, firebug will tell me where in the css editor the above code is pointing to. In the code above p1 and p2 are blog posts in the sidebar, the widget links is the blogroll and widget text is the widget text. What I want to do is either move the blog posts to the bottom of the sidebar listings or better yet not have them appear at all in the sidebar. First question that may or may not help my problem is, how do you get to the html code that is displayed in the left of firebug? I can see how to get to the css or header or footer.php on the right in the editors, but I cannot see where this html code is in my editors or anywhere for that matter. Since firebug lets me temporarily edit it, I would assume it is somewhere in the WP files. 2nd question, with me wanting to completely dump the posts from the sidebar (current theme places them there automatically) what would be a good way to do this? Thanks in advance for saving my sanity. Gary
	Attention ClickBank Warriors: Promote a Hypnosis Mp3 Downdload product that Really Works!!

08-08-2009, 02:41 PM	#3
nontemplates HyperActive Warrior Join Date: Jan 2008 Location: Sunny Florida Posts: 214 Thanks: 10 Thanked 22 Times in 19 Posts	Re: How to edit WP html using firebug? If by dumping the articles in the sidebar you mean you want to remove the sidebar completely you will need to go into the code (like if you just want to do use wordpress for a sales page presentation). I'm thinking that that the posts in the sidebar might be hard coded not just a widget. If they are a widget then its as simple as Steve noted. Let us know what theme you are using and we will be able to tell you exactly where the sidebar is called from and if the posts are hard coded in (not controlled by the widgets panel).

08-08-2009, 04:01 PM	#4
buckapple Gary Leggett War Room Member Join Date: Aug 2007 Location: TN Posts: 169 Thanks: 26 Thanked 19 Times in 11 Posts	Re: How to edit WP html using firebug? Hello everyone and thanks for the answers. I went to the Appearance/widgets when I first started and noted that it didn't affect the posts. So I assumed it was hard coded, so I did what you were eluding to, I found it in the sidebar .php and got rid of it. So in working with firebug in the html view, what I think I'm seeing and maybe you guys can tell me if I have this right. The view in firebug's html view is not actually in one place like the css and php files it points to in the right columns, but is more of a summation of the html code that makes up the layout?? Because as I looked at the code I could tell it was in the sidebar but when I went to the sidebar the code wasn't exactly what the html had listed. The theme is from a Internet Marketing course I got awhile back and doesn't have a name.
	Attention ClickBank Warriors: Promote a Hypnosis Mp3 Downdload product that Really Works!!

08-08-2009, 05:29 PM	#6
buckapple Gary Leggett War Room Member Join Date: Aug 2007 Location: TN Posts: 169 Thanks: 26 Thanked 19 Times in 11 Posts	Re: How to edit WP html using firebug? Hello Steve, I understand php is a server side language. My main question is as you look at firebug, and have the html tab highlighted it displays the html code in the lower left hand box. You have the option of either highlighting the html code in the box and watch on the upper screen which is your website light up if it is connected with that code or you can run your mouse over your site and watch the appropriate html code light up in the html lower left box. At the same time it will point to the css files for instance in the right hand boxes or the php code if for example it's in the sidebar.php that is accessible through the editor in wordpress. My question is and maybe you are answering it, the html code in the left hand box of firebug, where does that reside? is it in one place or is it a summation of the code that makes up the blog that holds it together, sort of like the container in css. Or can you go someplace, download a file to a script editor, open up in dreamweaver, whatever, how do you get to the html code in the left hand box or can that be done? Seems like it could since firebug lets you edit it temporarily to see how it affects the blog. Thanks for your response, Gary PS the bass player in my jazz trio last name is Diamond : )
	Attention ClickBank Warriors: Promote a Hypnosis Mp3 Downdload product that Really Works!!

08-08-2009, 05:53 PM	#7
Steve Diamond Senior Warrior Member War Room Member Join Date: Apr 2006 Location: Tucson, AZ, USA. Posts: 1,025 Thanks: 120 Thanked 158 Times in 115 Posts Social Networking Contact Info	Re: How to edit WP html using firebug? Hi, Gary. I thought I was answering it. I'll try again. If you were looking at a site where the pages reside on the server as HTML rather than PHP files, then Firebug would be able to point at the actual source of the HTML that you see in your browser. But in the case of a WordPress site this isn't the case. However, Firebug can't really tell the difference. It can just see the HTML and the CSS. They look just the same to the browser when they're generated "on the fly" by PHP before being served as when they're served directly from static HTML files. So with a WordPress site you're seeing HTML that has been created at the time you requested the page by the running of many PHP files that make up the WordPress site. Each PHP file may supply a small portion of the HTML code. In the case we're talking about the instructions in sidebar.php create some of that HTML code. But WordPress assembles it into one single page of HTML before it sends it to your browser. That particular page of HTML only exists for that fleeting moment. To your browser and to Firebug it looks like a single page of HTML. So that doesn't give you a way to trace it back to its source. You have to know the structure of your theme and the structure of WordPress. By the way, I do know that there are additional linked pages of CSS and of JavaScript that come into the equation, but I'm leaving them out for simplicity's sake. The HTML looks like one monolithic page to your browser, but it has many sources. I hope this helps. Steve
	Executive I.T. consulting for small/medium business Website development \| PHP - MySQL - JavaScript expert programming Software requirements analysis \| Specification writing Project management \| Vendor relationship management

08-08-2009, 07:12 PM	#9
Steve Diamond Senior Warrior Member War Room Member Join Date: Apr 2006 Location: Tucson, AZ, USA. Posts: 1,025 Thanks: 120 Thanked 158 Times in 115 Posts Social Networking Contact Info	Re: How to edit WP html using firebug? Thanks, Jeff. You said in three sentences what took me numerous paragraphs. Nice job of cutting to the core without extraneous explanation. Steve
	Executive I.T. consulting for small/medium business Website development \| PHP - MySQL - JavaScript expert programming Software requirements analysis \| Specification writing Project management \| Vendor relationship management

08-08-2009, 10:14 PM	#10
buckapple Gary Leggett War Room Member Join Date: Aug 2007 Location: TN Posts: 169 Thanks: 26 Thanked 19 Times in 11 Posts	Re: How to edit WP html using firebug? Hello Steve and Houdy, Ok, got it, I was thinking it might be a "summation" thing but your technical explanation is right on. Thanks for taking the time to help me see the light. I was able to tweak the blog to look real similar to a static site. Gary
	Attention ClickBank Warriors: Promote a Hypnosis Mp3 Downdload product that Really Works!!