Themes

Style and Content

  • Web sites tend to separate their content from their appearance or style
  • This is inherent in HTML
  • Makes it easy to change the look of the site without worrying about the content
  • CMS systems tend to do this with Themes
    • A collection of style parameters and scripts for a site
    • They can easily be changed independent of the content
    • Most CMS systems have a library of Themes and allow you to edit them

Changine the look of your site

  • The appearance of a site in WordPress (and most CMSs) is managed by Themes
    • Each Theme gives a different look to the site
    • colour schemes, fonts, background images
  • Go to the Appearance menu
    • Go to the themes submenu
    • This allows you to use a different theme
    • But there aren’t many installed

Installing new themes

  • In the wordpress admin page go to the Appearance menu
  • Choose Add New Theme
  • Search for a theme, you can search by parameters like colour, number of columns
  • Click the install link for the plugin when it comes up
  • Then click install now
  • fill in your login details: the hostname is igor.gold.ac.uk
  • the username and password are your normal Goldsmiths ones
  • the connection type is ftp
  • Once it has installed, click activate

WordPress Themes

  • Themes in WordPress consist of 2 types of element
  • Style Sheets
    • Specify the style of the pages
    • Fonts, colours etc.
    • Cascading Style Sheets (CSS)
  • Scripts
    • Bits of code that more generally control how the page works
    • What is and isn’t displayed, the layout
    • PHP

Overview and aims

  • This lecture will explain the use of themes and style and how to create edit WordPress Themes
  • By the end of the lecture you will be able to:
    • Describe what a Web site Theme is and what it is composed of
    • Edit CSS files
    • Edit WordPress Themes to change the look of your site

Setting file permissions

  • Before you can edit theme files you need to change the file permissions
  • Go to your G: drive and find your wordpress folder
  • Go to wp-content/themes and find the theme folder of your new theme
  • Right click on the theme folder
  • Select properties
  • Under Security select Everyone and click edit
  • select full control

Setting file permissions

  • On a goldsmiths Mac it is a little harder
  • You need to use the terminal (the app whose icon is a black box with >_written in it
  • type ssh yourusername@igor.gold.ac.uk
  • login with your goldsmiths password
  • you are now on igor, you need to use unix commands from now on
  • type cd public_html
  • this changes directory to your public_html
  • type cd yourwordpress or whatever the name of the directory wordpress is in
  • type ls and check that wp-content is listed
  • type chmod -R 777 wp-content

WordPress Themes

  • To edit a theme in WordPress go to Themes and Editor
  • You will see two types of file that you can edit
    • CSS files (Style Sheets)
    • php files (scripts)
  • There are two files that always have to be there
    • The Main Index Template script (index.php)
    • The Style Sheet (style.css)
  • There can also be other files that are included by these two

Cascading Style Sheets

  • CSS is part of the html standard but not actually html itself
  • HTML specified the content of the document
    • text
    • headings
    • sections
  • CSS specifies how this content is formatted
    • fonts
    • colours
    • spacing

Cascading Style Sheets

  • HTML has a lot of tags which create regions in an html file
  • CSS specifies how to format each of these
  • The basic syntax is:
    • tag {property1: value1; property2: value2;}
    • tag is the html tag
    • the properties are elements of formatting
    • e.g. h1 {color:blue; font-size:12px;}

Style Classes

  • What if you want two have two different types of section that are formatted differently, but have the same tag?
  • Style classes allow you to define your own types of element that are formatted differently

Style Classes

  • In the html you give a tag a new attribute called class
    • e.g. <p class=introduction>
    • The tag <div> (division) is often used with style classes
    • It defines a new element of a page (otherwise it is similar to <p>

Style Classes

  • In the css you use the class together with the tag
  • You use a dot “.” to add a class to a tag
    • tag.class {property1: value1; property2: value2;}
    • e.g. p.introduction {color:blue}
    • and p.conclusion {color:black}
    • are now two different element types with different styles
  • You also just put a class name with a dot in front and no tag
    • e.g. .introduction {color:blue}
    • any element of with this class has that formatting

Different formatting rules

  • You can have different formatting that all apply to a particular element
  • You use a dot “.” to add a class to a tag
    • A rule might be specified for the tag, and also for the class
  • All are applied but if two alter the same property then the more specific one is applied
    • p {color:black;font-size:12pt;}
    • p.introduction {color:blue}
    • The 12pt font will be applied to an introduction paragraph
    • The blue colour from the introduction will override the normal black colour

CSS Properties

  • CSS has lots of properties that can alter different aspects of the style
    • Font properties
    • Colour properties
    • Margin and border properties
    • many others

Font Properties

  • font-family the typeface (e.g. Helvetica, Times)
  • font-size in points (e.g. 12pt or names such as medium or large
  • font-style normal, italic or oblique
  • font-weight normal or bold
  • font takes a list of the values given above

Color Properties

  • color the text colour
  • background-color the background colour
  • background-color an image file, instead of a colour for the background

Color Properties

  • Colour is given as a name, e.g. “blue”
  • But you can also give an RGB colour number, with a # in front
    • In hexedecimal (base 16)
    • digits are between 0 and 15
    • Letters from A to F are used for 10-15
    • So 0 is the lowest and F is the highest
    • e.g. #000 is black, #FFF is white, #F00 is red, #800 is pink

Margin and Border Properties

  • margin-left,margin-right,margin-top,margin-bottom The size of the margin in e.g. points or mm
  • border-width in points (e.g. 12pt or names such as medium or thick
  • border-color a name or rgb value
  • The border parameters can also take 4 values for each side
  • or come in different varients e.g. border-top-width border-left-color

Overview and aims

  • This lecture will explain the use of themes and style and how to create edit WordPress Themes
  • By the end of the lecture you will be able to:
    • Describe what a Web site Theme is and what it is composed of
    • Edit CSS files
    • Edit WordPress Themes to change the look of your site

Cascading Style Sheets

  • That should be enough information to start editing some of the CSS files in a WordPress theme
  • Pick a theme an start playing around with it to change how it looks
  • Use google or trial and error if you don’t know what a particular property does
  • but first we can have a quick look at the php scripts

PHP

  • PHP is a server side scripting language
  • It is used to write small programs that generate HTML on the fly
  • All of WordPress is written in PHP
  • Themes include PHP files that control aspects of the page layout

PHP

  • A PHP file is an HTML file with some special tags
  • A PHP tag looks like this:
    • <?php code ?>
  • The code is executed on the server
  • It generates some HTML that replace the php tag

PHP

  • I won’t teach you much PHP today
  • Just some basics to get editing some themse
  • Otherwise PHP files look just like HTML files
  • You can edit them just like HTML
  • You might need some trial and error to get it right

PHP Structure

  • A PHP file is an HTML file with some special tags
  • A PHP tag looks like this:
    • <?php code ?>
  • It can contain commands/statments
  • It can also contain block formed by curly brackets {}
  • Anything inside {} forms a section
  • But a block can start with { in one html tag and end with } in another
  • So watch out what you delete

PHP Structure

  • A PHP file is an HTML file with some special tags
  • A PHP tag looks like this:
    • <?php code ?>
  • It can contain commands/statments
  • It can also contain block formed by curly brackets {}
  • Anything inside {} forms a section
  • But a block can start with { in one html tag and end with } in another
  • So watch out what you delete

Removing elements

  • The simplest thing you can do is get rid of something
  • You can simply delete some tags
  • You can also comment them out, if you want to keep them around
  • A comment is part of a program that is ignored
    • used for documenting code
    • also for temporarily removing bits of code
  • An HTML comment begins with <!--
  • and ends with -->

Template Tags

Template Tags

  • blog_info provides information about the site
  • For example:
    • <?php bloginfo('name'); ?>
  • Gets the name of the blog

Template Tags

  • Tags take arguments
  • They are passed in a string delimited by single quotes ‘
  • This string has the form: 'argument_name=argument_value'
  • You can have multiple arguments
  • They are all in the same string and joined by the & character.

Template Tags

  • wp_list_pages creates a list of links to the pages of the blog
  • It has many arguments
    • exclude excludes some pages
    • depth controls whether only top level pages are displayed or whether sub pages are displayed
  • For example:
    • <?php wp_list_pages('exclude=11&depth=2'); ?>
  • List all top level pages, and all pages directly under them, but not any further. Page 11 is not displayed

Template Tags

Overview and aims

  • This lecture will explain the use of themes and style and how to create edit WordPress Themes
  • By the end of the lecture you will be able to:
    • Describe what a Web site Theme is and what it is composed of
    • Edit CSS files
    • Edit WordPress Themes to change the look of your site
PDF Download    Send article as PDF to