The first steps.

  • Installed wordpress.nav
  • Developed mockup, logo, images and navigation structure.
  • All images is made/drawed/photographed by me.
  • Looked for a suitable theme:
    As i would like to have a custom website i searched for a free theme that was build in a way, that matched my wishes best.
  • Installed tema portafolio
  • Installed child theme and uploaded style.css
  • Tested out if the Child theme worked:
    Implimented the headline and changed the color:

#logo h2 a {
color: #C21D1D;
}
  • Created home, which is a static frontpage. It will not appear in the nav. Menu but will be linked when you click on the logo.
  • Created the pages; itu, changelog, designpage, portfolie, aboue, why lyl, me.
  • Created the menu and the navigation structure.
  • Removed widget and comment from all pages.
    • All changes made trougt wordpress dashboard.

Header

header

  • Created header.php in netbeans. Copied in the code from the original header.php, uploaded it trough filezilla to the server and edited it in wordpress editor.
  • Because i wantet the logo to be below the header and in it’s own div, i deletede the entire logo div i heade.php and left only the nav menu.
  • I created a new div id=logodiv and styled it in css.
  • I altered margin-bottom to 5 px to avoid a big gab between the two div’s.
  • Tried to uploaded the logo images trough filezilla and use a normal img src in the child theme, but i learned that you must use full, absolute, urls in WordPress.
  • I instead uploaded a the picture as the logo i wordpress and used php to catch it (see highlight).
  • I also added a link to the frontpage.

Header.php 

<div id=”logoadd”>
<?php if ( wpex_get_data( ‘logo’ ) ) { ?><a href=”<?php echo home_url(); ?>/” title=”<?php echo get_bloginfo( ‘name’ ); ?>” rel=”home”><img src=”<?php echo wpex_get_data( ‘logo’ ); ?>” alt=”<?php echo get_bloginfo( ‘name’ ) ?>” /></a><?php }
else { ?><h2><a href=”<?php echo home_url(); ?>/” title=”<?php echo get_bloginfo( ‘name’ ); ?>” rel=”home”><?php echo get_bloginfo( ‘name’ ); ?></a></h2><?php } ?>
</div>

Style.css

#logodiv {
width: 1000px;
Height: 150px;
Margin-left: 60 px;
border: 1px solid black; (removed later but is nice to have when doing adjustments) }

#masthead-wrap { margin-bottom: 5px;}

  • Now the header looks like this:

head

 

Footer

  • As in header i creaded a new footer.php and uploaded it.
  • I wanted to change the footer because of style and the php code generated a wrong year (y) and gave the copyritht to the sitetitle:

Old Footer

<div id=”copyright-wrap”>
<div id=”copyright” role=”contentinfo”>&copy; <?php _e( ‘Copyright’, ‘wpex’ ); ?> <?php the_date( ‘Y’ ); ?> &middot; <a href=”<?php echo home_url(); ?>” title=”<?php bloginfo( ‘name’ ); ?>”><?php bloginfo( ‘name’ ); ?></a>
</div><!– #copyright –>
</div><!– #copyright-wrap –>

footer

  •  I wanted the footer to be relative simple and to give the copyight to ”Me” and therefore i would like to have it link to the page me. I delete the existing code and ad:
<div id=”copyright-wrap”>
<div id=”copyright” role=”contentinfo”>
&copy <a href=”http://lyl.dk/?p=122″>Me</a>
</div><!– #copyright –>
  • I wanted to use a images in the footer. With filezilla, I uploaded a new folder, called images, containing my pictures. To catch my images i used php:
&copy <a href=”http://lyl.dk/?p=122″><img src=”<?php echo get_stylesheet_directory_uri(); ?>/images/mett-01.png” />Me</a>
  • I changed the padding to 0px 0; and styled the footer text in the style.css.
#footer {
padding: 0px 0;
}

#copyright {
padding: 15px 0;
font-size: 12px;
text-transform: none;
letter-spacing: 2px;
font-family: ‘Droid Serif’, Georgia;
text-align: right;
color: #bbb;
};

  • Now the footer looks like this:

footern

 

Fonts and style on Pages

  • I didn’t want the text to be all uppercase so i removed it.
  • I also changed the placement of the pages titles to center and styled the text.
#page-header h1 {
margin: 0;
font-weight: 200;
font-size: 23px;
text-transform: none;
}

.page-header-title {
text-align:center;
}

Pages

  • HOME: As i dont want any title on my home, i cheat a little. Instead of finding the php and deleting it, i write an Html space: ” &nsp; “ in the title. This makes just a transparent space. Easy!
  • Uploaded picture and link it my portfolio.
  • ITU: Uploaded picture, added text which i made to a hyperlink. This made the text red, so i implemented it and changed it back to black in the child css.
  • Why Lyl?: Uploaded picture and text
  • Changelog: Uploaded images and text.
  • Created all pictures in content width (size = 980px) to give the page an even look.
  • I used shortcodes to style the page, which is a plugin i installed. This makes it very easy to make colums, boxex with color etc. without doing any coding yourself and is one of the nice things about WordPress.
  • Design: Created pictures again, with content width and added text
  • About: Created an img and linked it to the Me page.
  • Portfolio and exercises:
  • I created all the exercises as individual pages and added them to the menu, under portfolio.
  • I could have used the portfolio plugin in my theme, but i would rather have the exercises simple, because of the amount of text.
  • I used images as links on the portfolio site to give the portfolio effect.