Grow your CSS skills. Land your dream job.

How do I FIND & style certain WordPress sections

  • # December 19, 2008 at 4:33 pm

    I am having a hard time finding certain things and figuring out how to style them in WordPress.

    I would like to find and style..

    the search bar
    the different navigation links that WP makes when I make new pages through wp.
    certain plug ins or widgets I ad.. such as "most recent post"

    What PHP file do I find these in and how do I style them with CSS?
    are they even in a separate PHP file?

    Thanks!

    # December 19, 2008 at 6:37 pm

    Check out Chris’ 3 part WordPress video series. You’ll probably find most of your answers in there.

    Rob
    # December 19, 2008 at 7:11 pm

    acialk is right :D

    you can find a few useful links in a post I made here:

    http://www.svgonline.co.uk/index.php/wo … c1-woohoo/

    :D

    # December 21, 2008 at 4:51 am

    I find the best way is to look at the page/posts view source.

    there you can see the html used and see the id/classes that are used.

    then just style away into the style.css found in your theme directory

    ik

    # December 21, 2008 at 11:47 am
    "ikthius" wrote:
    I find the best way is to look at the page/posts view source.

    there you can see the html used and see the id/classes that are used.

    then just style away into the style.css found in your theme directory

    ik

    That’s exactly how I do it.

    # December 21, 2008 at 1:19 pm
    "humanboy" wrote:
    "ikthius" wrote:
    I find the best way is to look at the page/posts view source.

    there you can see the html used and see the id/classes that are used.

    then just style away into the style.css found in your theme directory

    ik

    That’s exactly how I do it.

    Why I do it this way is simple…. if I use a different theme as a basis they have already added in the id & classes within some php source code. so whatever you have on your page from that theme you can style over it with your own design.

    simple as

    # December 23, 2008 at 8:58 am

    Thanks. Where is the page/post view source? is it something you view within the WP dashboard admin area or.. is it a special way of viewing a page source? If I view regular page source.. all I see is the HTML.. and I dont know what PHP file it is in. Ive tried to simple style the div ids or classes i see in there that I know I didnt create but it doesnt work.. I dunno if maybe its being styled somewhere else or what.

    # December 23, 2008 at 3:40 pm

    1. The search form is editable here:
    Search Form (searchform.php) and by CSS

    2. If you mean the links wordpress adds automatically when you add a page it is listed as a list via the wp_list_pages function. Usually located in the sidebar.php file if you are using the default theme.

    3. Your plugins a lot of the time contain there own CSS file. If they haven’t come with one you can go to your website and view the HTML output source and find out what classes are attached to these plugins HTML. From there you just go into your stylesheet and add the classes and ids and style them appropiately.

    # December 24, 2008 at 5:32 am
    "LinCSS25" wrote:
    Thanks. Where is the page/post view source? is it something you view within the WP dashboard admin area or.. is it a special way of viewing a page source? If I view regular page source.. all I see is the HTML.. and I dont know what PHP file it is in. Ive tried to simple style the div ids or classes i see in there that I know I didnt create but it doesnt work.. I dunno if maybe its being styled somewhere else or what.

    your original post asks how to style the theme really, so in wordpress forget the php as this code is not seen in the browser it works in the server in the background, but the html that is echoed out in php is seen, and this is where all the id’s and classes are and again this is what is on the the screen to be styled.

    so doing a regular view source on your browser shows you the mark-up for the page on how it is looking, remember the php just works in the background on the server.

    so for example you want to change one of the wordpress headings, look for that heading and find out what id or class it uses, then style for that id or class.

    what page or part of the page do you want to style? could you link to it?

    remember you can style for the html tags, sub tags, id’s & classes, so style to your hearts content.

    on another note, if you want to view the wordpress php files, I always keep a local copy of the wordpress on my system, so I can re-style/code it, in the and I can add/change classes/id’s within some php files as I have them locally, but this is only changing their id’s & classes, not changing the styling of them. remember styling is the style.css in your theme.

    hope that helps to somehow clarify the complex world of wordpress

    # December 24, 2008 at 5:36 am
    "cssgirl" wrote:
    1. The search form is editable here:
    Search Form (searchform.php) and by CSS

    2. If you mean the links wordpress adds automatically when you add a page it is listed as a list via the wp_list_pages function. Usually located in the sidebar.php file if you are using the default theme.

    3. Your plugins a lot of the time contain there own CSS file. If they haven’t come with one you can go to your website and view the HTML output source and find out what classes are attached to these plugins HTML. From there you just go into your stylesheet and add the classes and ids and style them appropiately.

    but if these are on the output page/post then it has all the classes & id’s to style, so really it is just the CSS file that needs to be worked on?

    I would watch out for going into the php cause you could botch something up in one file and probably need a new download of wordpress.

    # December 24, 2008 at 1:32 pm
    Quote:
    forget the php as this code is not seen in the browser it works in the server in the background, but the html that is echoed out in php is seen, and this is where all the id’s and classes are and again this is what is on the the screen to be styled.

    Im lost here, and please it could just be me being a big newbie. How can I forget the PHP files when that is where the HTML for me to ad my styling seems to be located? Im not talking about messing with the PHP code.. believe me I dont want to touch it ha. I just cannot find what PHP file holds the HTML for these sections for me to ad my styling to.

    Thanks for the feedback so far, some things are starting to come together for me.

    # December 24, 2008 at 3:15 pm
    "LinCSS25" wrote:
    Quote:
    forget the php as this code is not seen in the browser it works in the server in the background, but the html that is echoed out in php is seen, and this is where all the id’s and classes are and again this is what is on the the screen to be styled.

    Im lost here, and please it could just be me being a big newbie. How can I forget the PHP files when that is where the HTML for me to ad my styling seems to be located? Im not talking about messing with the PHP code.. believe me I dont want to touch it ha. I just cannot find what PHP file holds the HTML for these sections for me to ad my styling to.

    Thanks for the feedback so far, some things are starting to come together for me.

    I only learned wordpress a couple of months ago for a client, so don’t worry.

    ok, wordpress has many many php files, and lots have some html in them.

    but for the posts and pages that get displayed the html will be on those pages, so you only have to style for the html that is displayed.

    for example: below is the main index page for my clients site which includes an excerpt of wordpress

    Code:
    < ?php
    // Include WordPress
    define('WP_USE_THEMES', false);
    require('/data01/pfsifa/public_html/resources/wordpress/wp-blog-header.php');
    query_posts('showposts=1');
    ?>
    < ?php
    include('/data01/pfsifa/public_html/sources/start.php');
    ?>Home
    < ?php
    include('/data01/pfsifa/public_html/sources/metatags.php');
    include('/data01/pfsifa/public_html/sources/mainnav.php');
    include('/data01/pfsifa/public_html/sources/pfsbanner.php');
    include('/data01/pfsifa/public_html/sources/home.php');
    include('/data01/pfsifa/public_html/sources/foot.php');
    ?>

    there is not any real html there, as the html is in other files, but ignoring where they really are I will show you the footer only of that page which is from the browsers view > source:

    Code:
    # December 24, 2008 at 3:29 pm

    LinCSS25

    here is a index.php file that calls 3 php files. http://www.honeycomb-web.co.uk/test/
    please forgive the nonsense that is wrote, its quick

    use your browsers view > source and find the classes / id’s and make up a css file for it.

    once you done that, post the code and I will throw it up and show you.

    this is the php code for the index.php

    Code:
    < ?php
    include('1.php');
    include('2.php');
    include('3.php');
    ?>

    here is php 1

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


    A title

    here is 2.php

    Code:
    one
    two
    three
    four

    a new span

      here is 3.php

      Code:
    • orange
    • kiwi
    • melon

    there is no style sheet, so you style it, and hopefully this shows you how it all comes together to one place

    # December 29, 2008 at 11:22 am

    Ok I see what your saying i Believe. What you are doing is looking for the divs that are already made (in the HTML through viewing source) and just styling them with those names. But here is the thing. What if you want to ad a completely new div in the HTML. then you need to know where it is to put it into the HTML.

    Rob
    # December 29, 2008 at 11:46 am
    "LinCSS25" wrote:
    Ok I see what your saying i Believe. What you are doing is looking for the divs that are already made (in the HTML through viewing source) and just styling them with those names. But here is the thing. What if you want to ad a completely new div in the HTML. then you need to know where it is to put it into the HTML.

    You would then put it into the .php file where you need it to be :)

    Ok so index.php is as above. you see how it includes the php files 1-3.

    Imagine you are putting something together following some instuctions, a table for example. You read the instuctions at it says "get the table top and stick a leg to each corner" basically… So you know what you need to do, now you go and look for what you need – the table top, and 4 legs. Then you put them together like it told you to.

    Now, imagine your index.php file is that instuction book. What it is doing is telling you that it needs 1.php, 2.php, 3.php for it to be a table (or in this case, a website!)

    So what it wanders off to find the peices it needs and then sticks them in. It opens the 1.php file and copies the contence – then pasts it at the top, it then carries down the list in that order, pasting in the code as it goes.

    SO if you want to change something or add some HTML, you dont always go to the index.php file, you would go to the included php file you need.

    If you needed to add another div with "five" in it, you would edit your 2.php file. Save the file and the next time its loaded, index.php would read the instuctions, pull in the bits that it needs and display all the php files together as a website in one page – including your changes.

    Does that make sense?

    index.php is simply a shopping list, it grabbbing the stuff thats on the list and displays them.

    Viewing 15 posts - 1 through 15 (of 19 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".