14 {{ upvoteCount | shortNum }}
14 {{ upvoteCount | shortNum }}

How to edit WP html using firebug?

by buckapple
11 replies
  • WEB DESIGN
    • |
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
#edit #firebug #html
  • Profile picture of the author Steve Diamond
    Originally Posted by buckapple View Post

    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...
    Originally Posted by buckapple View Post

    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
    Signature
    Mindfulness training & coaching online
    Reduce stress | Stay focused | Keep positive and balanced
    {{ DiscussionBoard.errors[1062216].message }}
  • Profile picture of the author nontemplates
    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).
    {{ DiscussionBoard.errors[1062251].message }}
    • Profile picture of the author buckapple
      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.
      Signature
      ~Build your list with PLR Gluten-Free Videos ~
      {{ DiscussionBoard.errors[1062424].message }}
      • Profile picture of the author Steve Diamond
        Originally Posted by buckapple View Post

        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
        Signature
        Mindfulness training & coaching online
        Reduce stress | Stay focused | Keep positive and balanced
        {{ DiscussionBoard.errors[1062561].message }}
        • Profile picture of the author buckapple
          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 : )
          Signature
          ~Build your list with PLR Gluten-Free Videos ~
          {{ DiscussionBoard.errors[1062722].message }}
          • Profile picture of the author Steve Diamond
            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
            Signature
            Mindfulness training & coaching online
            Reduce stress | Stay focused | Keep positive and balanced
            {{ DiscussionBoard.errors[1062827].message }}
            • Profile picture of the author buckapple
              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
              Signature
              ~Build your list with PLR Gluten-Free Videos ~
              {{ DiscussionBoard.errors[1063379].message }}
          • Profile picture of the author houdy
            Originally Posted by buckapple View Post

            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.
            Signature

            Jeff Houdyschell
            WordPress Guides | WordPress Installation
            Work At Home Business Blog | Proven Income Opportunities | Best Work At Home Jobs

            {{ DiscussionBoard.errors[1062982].message }}
            • Profile picture of the author Steve Diamond
              Thanks, Jeff. You said in three sentences what took me numerous paragraphs. Nice job of cutting to the core without extraneous explanation.

              Steve
              Signature
              Mindfulness training & coaching online
              Reduce stress | Stay focused | Keep positive and balanced
              {{ DiscussionBoard.errors[1063027].message }}
            • Profile picture of the author Pubster
              Originally Posted by houdy View Post

              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)
              Signature

              {{ DiscussionBoard.errors[1105326].message }}
              • Profile picture of the author houdy
                Originally Posted by Pubster View Post

                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.
                Signature

                Jeff Houdyschell
                WordPress Guides | WordPress Installation
                Work At Home Business Blog | Proven Income Opportunities | Best Work At Home Jobs

                {{ DiscussionBoard.errors[1106364].message }}

Trending Topics