WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to make different 'web pages' and href them (44 posts)

  1. admin_michelle
    Member
    Posted 2 years ago #

    I'm attempting to make a website for someone and I was wondering how do you create the different web pages that the links will link to?

    I have created a child theme of the theme Delicate

    Do I just copy the header.php and rename it (for example about.php, biography.php etc) and then place it inside the Delicate Theme map (where the current header.php is situated or do I put the new 'link pages' inside the child theme – in either of these cases what would the a href link be...?

    Would be very grateful for any help on this topic...

    P.s This is my URL

    http://test.michellehedberg.net

  2. Rab
    Member
    Posted 2 years ago #

    Not sure if I'm reading you correctly, are you just trying to add new Pages? (Pages > Add New from the WordPress Admin Dashboard).

  3. admin_michelle
    Member
    Posted 2 years ago #

    This is the first time I'm working with WordPress so I'm not quite sure of the terminology they use, normally if you make a website you refer to the different 'spaces' the links will bring you to as pages (webpages) for example if a link says about you will create a html doc called about.html and put it inside your folder etc. but when I tried to create what they refer to as a 'page' in WordPress, it seemed like this was just a new post.

    I'm making a website for someone and want it to have the look and feel of a normal website (not a blog). If you look on my url http://test.michellehedberg.net you will see the links on the menu bar above the image, I want when you click on them that you will come to a new 'space' i.e. webpage that might look completely different to any of the other pages (except of course the menu bar and the logo (which I will obviously replace).

    I'm not sure to go about this, based on my experience using html I guess I will rename the header.php page about.php, contact.php etc but maybe this is completely wrong – the whole structure of wordpress seems very different to when you make a website using html and basically just put everything inside the same folder. The header.php page is linked to a hooks.php page a function.php page and loads more, also I have created a child theme of the theme header which links to certain 'pages'/documents in the delicate folder but also has its own 'pages in my delicate child folder. So I don't really understand how to create my new 'webpages' and I don't know where to put them (inside which folder) and how to link(a href) them to eachother...

    As you know when making a child theme you mostly seem to overwrite the original files by putting 'stuff' in your style sheet so I don't understand will I modify the original header.php file (which I am kind of treating like an index.html file but yet it isn't) or... what do I do?

    As you can see I'm totally confused and would be eternally grateful if someone could help me. I've seen websites created in wordpress so it obviously can be done BUT HOW???

    Thank you for your time

    Michelle

  4. Rab
    Member
    Posted 2 years ago #

    WordPress is much simpler than that, I think you're looking at it from completely the wrong angle. I would start from the start and work through the Documentation. Go into it almost forgetting what you know about making pages, etc, because it's not quite like that in WordPress.

    To add a page you go to Pages, and Add New from the Dashboard. To add it to the menu you go to your Dashboard again and click on Menu under Appearance.

  5. admin_michelle
    Member
    Posted 2 years ago #

    Sorry but I really don't understand the instructions on how to go about this at all, I have no idea what to fill it in, It's asking me to fill in the href url but I have no idea what to write and then it's asking me to fill in a 'label', I don't know what this is either...

    Also I have finally managed to design a menu that I like with the correct padding, font, look etc and I have managed to place it exactly where I want it on the page. I assume if I create a menu by using the dashboard, it will go back to looking the way the menu initially looked in the Delicate theme and I don't want that at all, I went to great lengths to change that – is there no way at all that I could use the menu that I have already created?

    Once again thank you so much for your time

    Michelle

  6. admin_michelle
    Member
    Posted 2 years ago #

    Hi again,

    Just to explain, I created a horizontal menu following these instructions

    http://codex.wordpress.org/Creating_Horizontal_Menus

    But the problem of

    1. How to create new pages
    2. Where to save them
    and
    3. How to a href them

    remains

    I can't seem to find any information about this anywhere...

  7. admin_michelle
    Member
    Posted 2 years ago #

    Hi again,

    I have now managed to add my pages and figured out the url for them, for example the link to my 'biography' page is

    http://test.michellehedberg.net/?page_id=32

    and if I put this in my code my links on my menu bar works so this is great.

    The problem now is that I can't find the actual 'physical' file when I go to my server. I want to open the page files in my text editor and make changes to the different pages (for example simple things like disable the link for 'biography' in the menubar when you are on that page. Do you have any idea how to access the actual file, where it might be saved?

    Thanks

    Michelle

  8. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    The 'page' is not static, it is dynamic. It is created when called by WordPress.

    You can create any static page you want (even basic hmtl), just wrap it in PHP.

    You can also review the generated source code.

  9. samfusion
    Member
    Posted 2 years ago #

    admin_michelle, WordPress stores text contets of page/post in your mysql database and image/attachments in file server/ftp. So, it cannot be edited using HTML editor. When you access the site, your post title, body content are called from database and image called from server. So, don't get confuse about html and php.

  10. admin_michelle
    Member
    Posted 2 years ago #

    Dear SwansonPhotos and Samfusion,

    Thank you so much for getting back to me. As you have gathered I don't really understand how WordPress works and I am indeed very confused about the difference between html and php.

    How do you 'just wrap something in PHP'?

    My problem is that I want to de-activate the links for the page that you are on in my menu bar at the top,

    see my url

    http://test.michellehedberg.net

    for example if you are on the 'Biography' page that link should be de-activated and I want to make a visual change (perhaps make the area round the word 'biography' grey) so that you know that you are on that page (basic menu stuff - all menus follow this pattern.

    I know the url for where the page is

    http://test.michellehedberg.net/?page_id=32

    But I don't know what the actual file is called and where it is situated, The menu that I have created is coded on the header.php file in the original Delicate folder (linking to the style sheet in my Delicate Child theme) it appears now that all my pages are displaying this menu but it must be possible to make changes for how the menu is displayed on the individual pages (otherwise what would be the point of making it in the first place?)

    Is it possible to write some code to make the menu behave differently on each individual page and if yes what is this code and where do you write this code (on the header.php file in the original Delicate folder, on the style sheet in my Delicate Child them folder or on the actual page files themselves, wherever they are)?

    I would be immensely grateful for some help on this as I am completely stuck now and can't move on.

    Thank you so much for your time and advice

    Michelle

  11. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    admin_michelle,

    What you are asking is for site design. We can assist with WordPress.org questions, but you will need to hire someone who knows both WordPress and your theme (which seems fairly limited) to do your site design. Most of what you want done can be done. That said, you would also want someone familiar with the site's default language, which I am not.

  12. admin_michelle
    Member
    Posted 2 years ago #

    Thank you very much for getting back to me Swanson.

    All I am trying to do is to de-activated the links with the name of the page that you are on (just like the way any menu would work – when you are on the 'about' page for example the word about in the top menu wouldn't be a link anymore and it might be styled slightly differently to indicate that you are on that page)

    As you might see if you go to my url

    http://test.michellehedberg.net/

    I have styled the links with a hover effect and I know how to style the links using css but yes the menu would have to have different links on each page. I'm a bit confused over why WordPress shows you how to make horizontal menu bars (this is the link I used)

    http://codex.wordpress.org/Creating_Horizontal_Menus

    and shows you how to insert it into your header.php page and then just 'leaves you there' without further explanation on how you will actually get it to work when it turns out to be so nightmarishly complicated. If you create this type of top navigation menu bar, of course you expect (and need it to) behave like a 'normal' menu bar - they all follow these principals, when you are on each specific page/link, that link is de-activated and it is styled slightly differently from the other links to show that you are on that/link page now.

    I really don't know what to do now, I can't believe it's this difficult to make a simple basic menu in wordpress...

    I really appreciate your help, have you any advice for what I can do about this problem at this stage or who to ask? I would hate having to give up when I have come this far...

    Michelle

  13. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    Michelle, I will not speak directly for the folks who run WordPress.Org, but consider this: WordPress incorporates other technologies such as jQuery, MySQL, JavaScript, HTML, PHP, and CSS to mention some. The place to get support for WordPress is here...the place to get support for these accompanying technologies is within there forums, and, the place to get support for a theme is with the theme developer.

    And, yes, creating a menu can be difficult for many...but it is fairly straight forward..it is just a list of links after all, and simply uses the elements ul, li, styled with a:link a:active a:hover and a:visited or the mouse over events...simply reviewing the source code of websites that use basic menus will point you to how it is all pulled together.

    What WordPress does by default is make creating menus simple and automatic...Using the default theme, it could not be simpler. If you want more than that such as style etc., you use a custom theme or write the code yourself or a combination of both (as on my site).

    Good luck.

  14. admin_michelle
    Member
    Posted 2 years ago #

    Hi again Swanson,

    Thanks for clarifying these things for me. However I don't seem to be able to explain my problem correctly. I don't need any help on how to create, style or code a 'normal' (meaning using html and css style sheets) menu, my problem is that I don't know in which 'document/file/place' to put this code using the wordpress structure. This is why I assume the 'problem' to be of a wordpress nature and therefore it felt appropriate to ask advice on the wordpress forum rather than any of the other forums as they might not be familiar with how the wordpress structure works.

    All I want is for the different pages to display the top horizontal navigation menu with the links for each page deactivated and styled to indicate that you are on that page when you are on that page.

    I know how to do this using html and css but I don't know where and how to do it within the wordpress structure.

    Michelle

  15. esmi
    Forum Moderator
    Posted 2 years ago #

    You can re-style the current page's menu entry using pure CSS. Try using Firefox with the Firebug add-on for this kind of work.
    http://getfirebug.com/

  16. admin_michelle
    Member
    Posted 2 years ago #

    Thanks Esmi,

    But where exactly do I style the current page's menu (in which document/file/place)? And how do I ensure that these changes don't appear on all the pages, just the current one?

    Michelle

  17. esmi
    Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of work.
    http://getfirebug.com/

  18. samfusion
    Member
    Posted 2 years ago #

    You need to create as many pages as you want and get the ID of pages and write css for $id-253{} and call them in header.php. Refer Google for customization of WordPress pages. Also, you can look for WordPress plugins example:
    http://wordpress.org/extend/plugins/page-style/

    Page Style

    Allow pages/categories to have different styles by adding a CSS Class (the Page Name or Category/Tag Slug) to the BODY

  19. admin_michelle
    Member
    Posted 2 years ago #

    Thank you soo much Samfusion!

    Finally the advice I was looking for : )

    Just to clarify,

    you say to 'get the ID of the pages'

    The URL for one of my pages is

    http://test.michellehedberg.net/?page_id=32

    So I assume then that the ID for that page is 32

    Where in the header.php document do I 'call them" and how do I 'call them'?
    Do I call them by writing
    $id-32{} in the header.php doc (but where)?

    And then I assume I will just write the css code in my style sheet?

    Once again thank you SO much for this help, I'm going to try it out now. I think you have solved my problem

    Michelle

  20. admin_michelle
    Member
    Posted 2 years ago #

    Hi again Samfusion,

    I still don't understand how to de-activate links on individual pages using this method, do you know how to to this?

    And I'm not quite sure if I have 'called the ID of the pages' correctly in my header.php doc.

    What is the code for this?

    At the moment the only reference to the page ID's in my header.php doc is when they are mentioned in the links (see code below)

    [Code moderated as per the Forum Rules. Please use the pastebin]

    Am I correct that I write the following in the style sheet to start styling the pages separately

    $id-current{}
    $id-32{}
    $id-39{}
    $id-41{}
    $id-43{}
    $id-45{}
    $id-47{}

    The links are currently styled like this in my style sheet

    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    Thanks for your help (I really appreciate it!)

    Michelle

  21. admin_michelle
    Member
    Posted 2 years ago #

    Thanks Esmi,

    But where exactly do I style the current page's menu (in which document/file/place)? And how do I ensure that these changes don't appear on all the pages, just the current one?

    Michelle

  22. esmi
    Forum Moderator
    Posted 2 years ago #

    Have you tried using Firebug yet?

  23. admin_michelle
    Member
    Posted 2 years ago #

    Hi Esmi,

    I can't seem to get it to work on my Mac. It downloads but when I try to open it, this message pops up

    "There is no default application specified to open the document firebug-1.8.4-fx.xpi"

  24. admin_michelle
    Member
    Posted 2 years ago #

    Samfusion (or anyone else that are able to help)

    I tried to style the individual pages by using ID's for the pages like this with the page that has the 'current' ID. Since I only want one of the links to be different I tried applying a class to that particular link (I've done that before whilst creating websites using html and it has worked) but it's not working at all now.

    I suspect that I haven't 'called on the page ID's' properly in my header.php file, how exactly do you do that (and where)?

    This is the code I wrote in my style

    $id-current{a.startlink:link {
    color:White;
    font:arial, helvetica, sans-serif;
    font-weight:normal;
    text-decoration:line-through;
    }

    $id-current{a.startlink:visited {
    color:White;
    font:arial, helvetica, sans-serif;
    font-weight:normal;
    text-decoration:line-through;
    }

    $id-current{a.startlink:hover {
    color:White;
    font:arial, helvetica, sans-serif;
    font-weight:normal;
    text-decoration:line-through;
    }

    Michelle

  25. esmi
    Forum Moderator
    Posted 2 years ago #

    Try opening it with Firefox.

  26. admin_michelle
    Member
    Posted 2 years ago #

    Oh is it considered bad manner to be involved with more than 1 topic at once, I didn't know that (and I don't really understand why) but I do apologize in that case : O I just thought I'd narrow it down to that specific question since the heading for this post 'How to make different 'web pages' and href them' has been solved and isn't really relevant anymore as that problem has been resolved.

    Anyway Esmi, I am also in the process of trying to open firebug with firefox, I'll let you know how I get on.

    But I still really want to know the code for how to call on the page id's in the header.php doc and where to put it, why am I not allowed to ask this?

    Very confused...

  27. esmi
    Forum Moderator
    Posted 2 years ago #

    Start by using WordPress to create a custom menu. Or use wp_list_pages. Or wp_page_menu if you want but do not hand code a nav menu. That's not how WordPress is supposed to work.

    custom menu
    http://codex.wordpress.org/Function_Reference/wp_list_pages
    http://codex.wordpress.org/Function_Reference/wp_page_menu

    This will give you all the CSS classes you could possibly need for styling currently active page items etc.

  28. admin_michelle
    Member
    Posted 2 years ago #

    Esmi,

    Yes Firebug did 'open' with Firefox. At a quick glance it seems to be a very good program so thanks a billion for recommending it. I while read through it properly now. I'm still a bit confused on how to install it. It said 'click here to install and to restart Firefox' I did that but I still can't find it on my computer. When I search for Firebug a folder called ZendFramework pops up. Is that it?

  29. esmi
    Forum Moderator
    Posted 2 years ago #

    No. Just place your mouse over the element you want to examine, right click and select "Inspect Element".

  30. admin_michelle
    Member
    Posted 2 years ago #

    If You customize a menu with wordpress, can you position it exactly where you want on the page (like I have done now) and style it how you want?

    Also from reading documentations on wordpress I thought you had to create child themes of the available themes to be able to customize things exactly the way you want. I'm a graphic designer so I want to use my own design rather than just using a pre-made theme template that mightn't suit my needs.

    At the moment I'm meant to create a website for a musician that he can easily update himself (that's why I was recommended to make it with wordpress rather than my usual html so that it would be easy for the client to update himself)

    I want this site to have the look and feel of a website, not a blog. And I feel like I'm (although extremely slowly) making progress in the right direction for how the website should look so I'm very reluctant to start from scratch again.

    Also if you are not meant to hand code a nav menu, then why is wordpress telling you that you can, on this link?

    http://codex.wordpress.org/Creating_Horizontal_Menus

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.