Steven Thompson

Wrapping code in Wordpress

steven — Sun, 21 Sep 2008 21:56:05 +0000

It took me a while but I’ve finally found the solution to making Wordpress wrap code within the

tag.

After hours of trying to edit the CSS myself, I decided to give up and see if anyone else had the solution. The following code is the work of one Tyler Longren. It doesn’t seem to be valid CSS, but it works. I’m keeping it for now. Note that this will work in syntax highlighting plugins that use the

command. The one I go with is WP-syntax.

All you need to do is copy and paste this into your stylesheet. Without it, the code will overflow but will scroll and still make the code available. This is a much better solution for clean copy and pasting, but for some of my code I wanted it to be easily readable. This is because I like the idea of example HTML, CSS files….etc with loads of comments. It works as a revision tool for me and I guess might be useful for like-minded people who just like to review tags / code by reading through something like that.

pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

HTML - The Basics (Tutorial 1)

steven — Sun, 21 Sep 2008 17:49:30 +0000

HTML is really easy to learn - especially these days. Those of you who are completely new to code will have to get used to a few things.

First of all, if you want results fast and aren’t concerned about learning the skills then use a program. There exist many different tools for editing web pages in a WYSIWYG (What You See Is What You Get) interface. What I mean by that is that you can use programs to edit web sites and what you design on the screen is the final result! A popular (but expensive) program is Adobe Dreamweaver but for more basic purposes Microsoft Word and Openoffice will generate HTML web pages based on the content of your document!

If you want to learn the skills (which are essential if you want to get into serious web design) then there are a few points to keep in mind.

HTML is a set of tags (think of these as commands to the browser) that tells the browser whether the text is a table, paragraph, heading, …whatever. The browser then processes these commands and displays the page.

Let’s take an example. The HTML element p tells browser that the following text is a paragraph. The corresponding tag is

. We use

to tell the browser when the paragraph ends. Good HTML code always contains the staring tag (e.g.

,
or ) and the ending tag (e.g.

or )

There are many tutorials and lists of tags out there, so I thought I’d just try and give a brief overview of all this. It’s by no means extensive in any way, but chances are it’s all you’ll need. A LOT OF HTML CODE IS BECOMING REDUNDANT, so don’t bother learning EVERYTHING from some old book. For example, HTML used to include formatting tags which told the browser which font to use, how big…etc. But now all of this is dealt with by a CSS stylesheet which you’ll probably be looking to learn next.

What I’ve tried to do below is to write an example HTML document. You can copy and paste this into Notepad, save it as whatever.html, and then open it in a web browser to see the results. I’ve left a lot of stuff out. For example, attributes. You can add things to the starting tag to define alignment, font…etc. But CSS has made a lot of that useless. It’s still worth learning though and you can use the wealth of tutorials out there to do so. But for now, let’s outline the basics of a HTML document…

Some of the tags are not explained within the text below. So I’ll explain them here.

first one at the start, last one at the end. These tags tell the browser it’s an HTML file.

the stuff within these tags won’t appear on the page itself. For example, the page title will appear in the bar at the very top of the web browser.

contains the actual page contents.

 
>
 
>
>Title of page>
>
 
>
 
>This is a big heading!>
 
>This is a sub-heading.>
 
>The headings get smaller as you go through 1 to 6.>
 
 
 
 
 
>This is a paragraph.  Note that there's a bit of space between this and the last piece of code.  It doesn't make the slightest difference.  HTML automatically inserts space between paragraphs.  It also inserts a blank line before and after a heading.  If you want extra space then use this: /> That's just inserted a 'page break'.  Let's do a few more. />/>/> Cool.
>
 

 
 />
 
>This is another paragraph.  It's separated from the previous paragraph with a horizontal line using the hr tag.  That's pretty useful too! >This text is in bold.>
>
 
>In this paragraph I've got a few weird looking expressions.    < > & They represent Non Breaking Line Space, Less Than, Greater Than and Ampersand respectively.  You may also see the more difficult to remember expressions for the same thing,   < > and & respectively.  The first one is important because it's a way of including extra space in the line.                 The space I just left won't display in the document so I need to put loads of     's in instead.  The other three exist because HTML doesn't display all of the characters on your keyboard correctly (some of them are used to indicate code).    Therefore you need to enter these expressions to get the desired result.  There are many more so it's worthwhile keeping a list of them somewhere.  Do a Google search for HTML Character Entities.
>
 
 href="http://www.steventhompson.co.uk/">This is a link to the homepage of this site.>
 
/>
 
 src="http://www.steventhompson.co.uk/MBCT2.jpg" alt="" />
 
/>
 
>
	>An Unordered List>
	>Has bullet points attached.>
>
 
>
	>An Ordered List>
	>Has Numbers.>
>
 
>
>

Click here to see what this code conjures up in the browser

Indent Page List - Fixed in WP-Andreas09 (kind of)

admin — Sun, 07 Sep 2008 17:48:02 +0000

Well, I experimented with Breukies Pages Widget, looked around for other plugins and basically spent weeks and weeks wondering why my sub-pages wouldn’t indent on the Berlitz Edinburgh Website. Then finally I took a step back and decided to uninstall all these fancy plugins and just try and edit the theme myself! It turned out to be surprisingly simple!

After reading through the guide on Styling Lists with CSS on the Wordpress site, I discovered that what has probably happened is that this theme was designed with an older version of Wordpress in mind. Ainslie Johnson, who ported the andreas09 theme over to Wordpress acknowledges the issue here. In wp-andreas09 the left sidebar is labelled leftside in the stylesheet. I added this code to style.css:

#leftside ul li {
    padding:0 0 0 8px;
}

ul li tells Wordpress to style the 1st level of sub pages.

padding adds space in a clockwise fashion starting at the top. So I added 8px of space to the left.

…and it worked! It’s not perfect though. It’s messed with the aesthetics a bit and the page looks a bit disproportianate now in my opinion. The sub page boxes are to close to the central box. I’ll mess around with this in due course.

The Menu

steven — Fri, 15 Aug 2008 17:21:02 +0000

The original wp-andreas09 template puts all the ‘pages’ into the horizontal menu and lists categories in the sidebar. Berlitz Edinburgh will have a lot of pages and I want those to be listed in the sidebar and to have only a few fixed pages along the horizontal bar.

First step was just to get the pages to list themselves in the sidebar. This was straightforward using the wp_list_pages function. I simply added this code to the sidebar.php file of the wp-andreas09 theme.

Main Menu

sort_column=menu_order does as the name suggests.

title_li= has a null value and means that Wordpress won’t insert the ‘pages’ title at the top of the list.

hierarchical=1 was supposed to indent the sub pages but didn’t. Here was my problem. But the problem was easily solved by modifying the CSS a little bit….

I then used Garrett Murphy’s Page Link Manager to add the functionality to ‘hide’ certain pages. These can then be linked to in my ‘fixed’ horizontal menu. This is perfect for giving you the flexibility to layout the menus as you want. Now all that’s left is to make the horizontal menu a fixed one (not associated with the Wordpress function that assigns pages to it).

First of all, I needed to remove said Wordpress function. It is in the header.php file:



Home


 if(function_exists("wp_andreas09_nav")) {
 wp_andreas09_nav("sort_column=menu_order&list_tag=0&show_all_parents=1&show_root=1");
 }
?>

Then I simply added my own page links:



Home
Where to Find Us

Contact Us

The links were obtained by just clicking ‘view page’ in the Wordpress Editor.

So now I am blessed with a horizontal menu that can link to ‘hidden’ pages and a side menu that displays the pages included in the ’site navigation’. Even better…if I want one of the hidden pages to appear in both the horizontal menu and the side menu, I can just ‘unhide’ the page and then it’s done!

One problem….the sub pages are not indented in the side menu as I expected. Hmmm….guess that’s what I’ll have to figure out next….

The Header - Adding a Banner

steven — Mon, 11 Aug 2008 23:12:12 +0000

The banner I designed is 1600 by 180 pixels. It doesn’t repeat well by design (and I don’t even know if the repeat-x function works because I haven’t tested it on a screen with a resolution larger than 1600 yet) so that’s still an issue to sort out. The image used in the banner is not our own and so I’ve added links to the site in accordance with the copyright holder’s requirements.

1) Added the following to style.css under /*** header ***/

#banner {
background:#1e1e1e url(images/berlitzlogo6.jpg) top left repeat-x;
margin:0 0 0 0;
padding:0 0 0 0;
overflow: hidden;
height: 180px;
width:100%;
}

This changes the height of the original banner to 180px.

2) Removed from header.php the following;

…and replaced it with…

…in order to remove the usual Wordpress style titles overlaying the banner.

Choice of Theme for Berlitz Edinburgh

steven — Sun, 10 Aug 2008 22:56:08 +0000

I love the design of this site which is the work of Tom Stardust. He really has an eye for beautiful web pages. But for the Berlitz Edinburgh site, I wanted a layout that was geared towards a more traditional website rather than the Wordpress style of this one. I needed look no further than my other favourite designer, Andreas Viklund.

Andreas has a range of templates; some of them Wordpress themed, some of them not. You can take a look at the range here. In particular, I chose the theme Andreas09 for the Berlitz Edinburgh site layout. However, this template was not available in Wordpress until….Ainslie Johnson ported it over. The download for the Wordpress-themed Andreas09 is available here. So Andreas and Ainslie are duly credited at the footer of the site. Both of them have done excellent work and I hope to donate to them at some point!

Some modifications were required to tweak this excellent theme into a corporate site. I’m keeping track of such modifications here.

Berlitz Edinburgh Site to be Based on Wordpress

steven — Sun, 10 Aug 2008 22:53:16 +0000

At the moment, I’m spending all of my spare time creating the new website for Berlitz Edinburgh. After spending many months dabbling in HTML, CSS and PHP trying to build the thing from scratch, I decided to move the whole project to Wordpress with an existing template.

It seems from a quick browse around the internet that a lot of people are thinking along the same lines. There are many people using Wordpress to develop ‘regular’ sites rather than blogs. I even noticed some web designers that only develop using Wordpress.

The advantages of using Wordpress are clear:

Anyone can edit the site. All they need is a username and password and they can edit content in the sleek, online Wordpress Control Panel. It’s similar to using Microsoft Word, which means people don’t need any coding knowledge to edit it and this will be very advantageous when we start commissioning translations for the site.
The added functionality from plugins is amazing! Secure contact forms, beautiful galleries, and probably most importantly, incredible Search Engine Optimisation tools!
It’s Open Source…and I love Open Source. I’ve been a Linux user for over a year now and have always loved and raved about OpenOffice, Firefox…etc. I know I can never create anything that could match the Open Source Community but one day I could contribute…..

So there you have it. I’ve decided to keep track of how I’ve implemented Wordpress to create a corporate site with an outstanding Content Management System. I also have to be careful as to whose work I am using for plugins…etc, so I’m keeping track of any extraordinary licensing that exists. I want to keep a record on this site so that other people can take advantage of this great technology.

By the way, my dabbling in HTML, CSS and PHP didn’t completely go to waste as the theme did need to be edited from time to time!