By Thursday everything needs converted to php

All I need to do is the single pages for the portfolio pieces


Notes (Tuesday, 28th)

  • Some notes today may be repeat from previous classes since he’s showing us how to build it using different code (someone’s ‘finished’ site)
  • Name a new folder with the other themes: rachelharget_portfolio_theme
  • Open site and screenshot it and put in folder (HAVE to name it screenshot)
  • Command i and uncheck height something
  • Open your site info from hard drive and copy it all into the theme folder
  • Rename index.html original.html
  • Have the other portfolio open so you can copy and paste things rather than typing it all out
  • Copy all of the header
  • Make a new php document and paste stuff there and save as header.php
  • Do the same thing for the footer saving as footer.php
  • Copy and paste main and make new php file and paste in and save as index.php
  • In header have title field put <?php bloginfo(‘name’);?> so it will bring in the title of your site from wordpress
  • <?php bloginfo(‘stylesheet_url’);?> this is in the document you have so you can figure that out
  • 1 option is to replace nav with <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li’);?>
  • Will be easiest to have the code from class open and copy and paste things so it all looks the same (could copy and paste it all and change for what you need
  • You’ll use loops for each section for single page scroller like he does for each separate page but it will all go in your index.php rather than multiple pages
  • Make sure about stuff in <p>blah blah about me </p>
  • Make sure to do all the theme name stuff in the css file
  • Title your portfolio pieces the name of them
  • With this the thumbnails will be the ones from in class so you’ll just add all yours and delete those first two later
  • For each portfolio piece you’ll hit the text button at the top under the title (visual and text buttons) then in the text section you’ll just copy and paste all the code (name, role, etc.) for that specific piece (be sure regular text is <p>sidjfjffj</p>)
  • You’ll do the same thing as above with the info for your about page
  • You’ll need to set up a new field, port medium in the wordpress site  (image field)

Detail Page

On your detail page maybe make each number for the slideshow part a button and do like <button1> and so on and then in css all you have to do is copy stuff from button 1 and copy and paste it for the others (change to correct number)

Notes (Thursday, 23rd)

  • We use php because that it what wordpress uses.
  • In the index file lines 1 and 16 get the header(1) and the footer(16) files and puts them into the index page. Basically puts all the separate files together. This makes changes easier because if you change the header or footer it changes on every page.
  • Colons in code means there is more to come like in <?php if (have_posts()):;?>   
  • All posts have two fields:
    • Title and content
  • By adding the <h3> before fetching title the title will be headline 3 size (line 7 in screenshot below)
  • Result should be what is shown below (left= code, right= site)Screen Shot 2017-02-23 at 9.40.45 AM.png
  • With php you have to tell it to fetch all of the different things
  • If you go to dashboard and go to your pages tab and on the right there should be a template drop down menu and you can select contact and be sure to hit update
  • To make this for the other pages duplicate contact and change the template name (Template Name: whatever page) to the page name and change category name in line below to the same thing Screen Shot 2017-02-23 at 10.02.02 AM.png
  • Make sure that when you select that template type that you hit the update button
  • After all this if you hit each page in the nav bar it should only display the appropriate content per page
  • Take out home page title in nav bar and just use the logo for navigating home
  • You should just be able to copy all of your information into this file to make the site mine
  • If you change the dates on the portfolio thumbnails you can move them around since they upload by date (add them backwards to get them how you have them already)

Site to do

**Need to re upload this to the server by Thursday (23rd)**

Smooth scrolling is there but doesn’t scroll to pages perfectly – need help (scrolls to pages right from home but not from one page to the next)

have name of pieces come up on rollover for portfolio(use a figure caption? look at ted boyers page from markus’ site and do the inspect element), general aesthetic fixes on detail page(menu bar is being weird, needs some color) still playing with contact page and making it look better (going to just center everything and change email address to send me an email and make other one just resume)

Notes (Thursday 16th)

Keep in mind that for the next few weeks you have to work on machine in classroom!

  • Code has to housed in htdocs folder in the MAMP folder in application menu
  • New document/ PHP/create (no difference between this and HTML) but when you save it it saves as PHP
  • Save as index.PHP like
  • Have to type localhost:8888 in url box to get to server (can only fire code that is in there)
  • WordPress.org
  • Open source means it is free and anyone can develop on it, community is developing it
  • Downloaded wordpress and it is saved as rachel_wordpress in php folder
  • Open wp-config.php in dreamweaver
  • Go to localhost8888/MAMP/tools in menu bar/phpMyAdmin/ will open new window and make a new database
  • Screen Shot 2017-02-16 at 9.48.14 AM.png
  • Database name:rachelportdb, Host:localhost, Username:rachelportmydpad, Password:123456
  • Type all of this in on dreamweaver in the correct sections in the wp-config document
  • If all done right should look like screenshot after clicking the second link on original (localhost:8888)pageScreen Shot 2017-02-16 at 10.20.48 AM.png
  • WordPress username: rachel_admin, password: 123456
  • Dashboard: back end – look and feel: front end
  • Dashboard for wordpress and localhost:8888 are saved in bookmarks
  • Header and footer php will be separate so they remain consistent through all pages
  • Make a new php and delete everything
  • Back to original and take everything about the first comment and paste it in new file and save it as header.php in htdocks, wp-content, themes, and in the folder we made
  • Make new doc and do the same thing but copy main stuff and paste in a new file and save as index.php in same folder as before
  • Do same thing for footer and save as footer.php (make sure you go to bottom not just end of footer)
  • Did a lot of code you will need to refer to to do custom themes but it isn’t anything too bad once you get to your site and it all worked so the code is all good
  • Made a folder on desktop called “code for custom themes” on desktop for reference

Sit fixes progress

General: Smooth scrolling is there but doesn’t scroll to pages perfectly

Header: header is sticky and dropped the gray background, might play with the menu text though

Home: need to either drop the home page or make it better- thought about making the logo a gif or just animated

About: working on the text layout in design statement

Portfolio: have title of piece (in white) come up on rollover

Detail Page: name of piece at top, for shoes/multiple images make a slideshow, general aesthetic fixes

Contact: still working to make it look better


maybe make a gif in the home page logo

could have the H slide away from the R, as the H slides ‘achel’ will slide out from the R and the same thing with ‘arget’ after the H then have graphic designer pop up

have regular logo then have R change to same green as the H and seperate from the H then have name and graphic designer show up

images: regular logo, seperate RH and change R to green, rest of name comes up, then graphic design

Site fixes

smooth scroller

header: sticky header, drop the gray background in the header, make nav text bold so rollover is better

home: drop the home page or make it better (background image or something)

about: no justified type, image larger or wider column for text

portfolio: have title of piece (in white) come up on rollover

detail page: name of piece at top, for shoes make a slideshow, make it better, I know it sucks

contact: make it better, I know it sucks


Notes for site

Site is on server but needs a few fixes and then put back up.

NEED: finish resume and link to the button

IF TIME: make about page shorter(move photo up to top and take away extra space on bottom), detail page needs some space on left side