Yesterday I posted about finishing putting WordPress into one of my custom XHTML pages. One thing I found when playing with WordPress’s code was a new word: “excerpt” – meaning: a short extract. I did play with and test out this code, and it worked – it would show you the first so many characters of a post then a “[...] Read more” where you could click and it would direct you to where that post lived [on the /blog WordPress actual page]. This gave me an idea – how about putting a news feed on the home page of the LINKS site, perhaps on the (blank white) right hand side – so visitors would be able to quickly see recent news, and read further if it interested them.
So today I went back to the “excerpt” code and started playing, and in the end settled for some code that produced the last (up to) 10 titles of posts. These were hyperlinks to the main news story – but over on the WordPress page in the /blog directory. Not what I wanted. I wanted it to point NOT to where it really lives, but where I was having it generated and shown on the News page. It was easy enough to change the hyperlinks to all direct to that .php page, but they would land you at the top of the page, regardless of how far down the page the news story you want to read is.
I am currently taking a Human-Computer Interaction and User Interface course – this combined with my previous need to always strive to build sites that give high ease of use to the user meant that many results of my new-found tinkering just wouldn’t do. I therefore had a genius idea of how to put the user onto MY news page, but at the story they want.
As you may or may not know – if you are on a long web page, and click a link – sometimes it will just move you to another part of that page by adding e.g “#sectionFive” to the end of your URL. This would be essential to my plan, as each post could have a different div id – this is what generates the #variable. As these posts were being generated by WordPress’s “Loop”, I knew if I could get it to name each div itself, I would be rolling – so that’s what I did.
<div id=”<?php the_title(); ?>”>
This code sets the div id to be the title of the post, but the PHP does it before the HTML loads, so the HTML doesn’t notice as it just gets a nice string of text, something perfectly acceptable for a div id. Now all that is left to do is to get a hyperlink to link to this new div id – append it to the end of the page URL.
<a href=”/indexblogtest2.php#<?php the_title(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a><br />
This code links the user to: /newspage.php#story_they_are_going_to. My code there says indexblogtest2.php - that’s where I was developing this code before it went live. The actual hyperlink text is also the title – this code snippet was taken and modified from previous WordPress post code – it is standard to output a hyperlinked title. I had also moved my (right hand side) news section out to a php include now. I added the date and a horizontal rule [loving these now] to each news item too.
Styling was a bit of a pain – I tried with an unordered list <ul> and list items <li> for each news heading, but it didn’t look great, and insisted on budging everything far to the right, and it took a lot of margin-left:0px; to make it right. In the end, I settled on just normal paragraphs, which look fine. Getting this to look good on IE was a pain too.. and I am toying with the idea of taking away its custom stylesheet and embedding some CSS in an IF [IE] section in the header – resulting in one stylesheet, with one property being overridden for IE. Bit more maintainable, but I almost made some more IE-only modifications today..
Anyway that’s all for now – I was ecstatic when that custom linked worked perfectly.. decided to record my thoughts here.