WordPress Workshop – Day Two

This is the second part of a 2-part workshop on how to install the Content Management System - Wordpress.

Watch Video

 

 

And away we go
So this is day two of the WordPress Workshop.  What I would like to do is recap a little bit about what we discussed yesterday.  What we talked about was Content Management Systems.  We talked about how WordPress is a Content Management System that revolves around things like posts, pages, media and sidebars.  Yesterday we went through the process of installing WordPress and that install took, I don’t know about largely it takes about five minutes.  It took us longer because we were going through each of the different parts of it but basically in order to install all you have to do is download, create a database, then run the config.  That’s essentially all you have to do and then you are up and running.  So if you only needed a very basic Content Management System or even blog, you can be up and running in about five minutes.  Now the only catch here is that all of this has to run on a server environment.  This is not something that can just run on a normal desktop.  It requires PHP whatever and My SQL.  If you don’t have that capability then you cannot do this at all.  So that’s sort of a recap of yesterday.  Do you have any questions about what we did yesterday, like you had a moment to think about it?  Yes sir…

[0:02:03.5]

Not for WordPress.com but for WordPress that’s installed on our local server.  We did and I believe our password was 123, yeah.  That is not affiliated with WordPress.com it’s completely separate.

[0:02:23.3]

So we installed...
Yep, that will do exactly all of that.  So we installed, we looked at the admin area and we looked at the final result of the website. So why don’t we go back to where we were yesterday and in order to do that we have to run our server environment like Xamp… I thought I saw a question there… Let me just go and get it started here, Xamp server, we are rocking and rolling.  Local host and we called this WordPress Workshop.

[0:03:15.1]

So here’s our awesome website that we made yesterday.
Yeah we put it in a folder called WordPress.  So here’s our awesome website that we made yesterday.  We installed a theme with all this massagy sort of weirdness and all of the pink everywhere, right you remember that we did that.  Now as it turns out I think that this probably wasn’t the best design decision for our particular project so I would like to change it.  So how do you change this stuff, like it came up automatically before, how do we get back to the admin panel?  If you ever want to get back to the admin panel, to get there what you have to do is whatever your web address is you’ll say WP Admin.  You type that in the path like whatever.com/whatever folder it is you just put WP Admin and that will redirect you to the admin area.  So if we come here… let me make sure my zooming tools on, there we go.  Come here and type in WP Admin that will take us directly to the login page.  That’s how all the WordPress systems work.  Pretty awesome huh?  So now that we know about that we can type in admin and our super-secret password of 123 and we are back in business.  It’s taking a moment to log in.  Yes sir?

[0:04:50.7]

That is correct.  Often times in my experience clients never remember how to do that so I send it in an email or sometimes I have placed it as a button, the actual page that says admin so if you click on it it will take you to here.  I have for some I’ve put like an admin here or an admin right here so they just go to their website, click admin and then they have the admin area.  Yes sir?

[0:05:20.2]

Well you can delete anything yeah.  You mean on Facebook or on this?

Oh on this for sure.  If you’re the admin you have control over all the content.  Now to make that link David all I made is an H-Rap to the website URL/WP Admin.  That’s how it works.  So I guess that as it turns out this isn’t really the design decision that is really going to work out for us and so that’s no big deal because we learnt yesterday we can go to appearances and to themes and under appearances and themes we have the ability to change it just by activating another theme.  So I’ll activate the original 2011.  It takes a moment and then just like that, once I refresh now we have this theme.  It’s kind of amazing.  Like I said I lost my mind the first time I saw that and it makes complete sense in how all of that works. 

lifting the hood
Well, today is all about lifting the hood a little bit and understanding how this system works because there’s a lot of trickery that’s happening here.  If we got to our server and by that I mean to our WWW folder and if you don’t remember it’s probably going to be C – Program Files – Xamp – WWW.  If you’re not using Xamp and you’re on a Mac its going to be probably in an HTDocs folder some place.  So here we are looking at the WordPress Workshop folder and inside there we have a WordPress folder and we have all of this stuff, all this stuff that we’re looking at, all of this… let me zoom out so that the pen will work… there we go… all of this stuff through here, all of the files from this point on down are things that you do not want to touch unless you really know what you’re doing because this makes WordPress work.  You have been led to believe that when you work on a web project, when you put things in the folder here this is where your website lives right, that’s what you’ve been brought up to understand.  WordPress is a very sophisticated system that does URL masking so our project files are actually three folders deep.  They don’t live here at all, there’s trickery that makes it feel like the files are here but they’re actually not.  The files are located inside a WP content themes and whatever the theme is and we picked 2011.  That’s where the real files are but, in contrast, you don’t type that into your URL, you don’t say David.com/WP content/themes/whatever you never type that in at all.  What WordPress does it says ‘you know what I’m going to figure this out for you if you’re in HT Access Rewrite mod’.  And it says ‘we’re going to take all that middle part out and make it look like you’re actually here.  It’s a really important concept to understand whenever we start adding our own files because your file paths are going to not feel like they’re correct.  Pretty wild huh? 

So everything that you are going to do is going to be in your themes folder or possibly the plug-ins folder.  Any questions about that?

trickery
Awesome.  I know it seems weird but that’s just kind of how the system works.  There’s a lot of trickery that goes on.  So, if you’re messing with any of these files here that means you’re probably doing some sort of power user thing that is going to affect the entire system.  So this index file that you see here is not the same index file that you think that it is.  This is for the entire WordPress system. 

Alright so here we are with themes.  We’ve gone through our file path trickery here and I want to just talk a little bit about the three theme paradox that I like to call it. 

We’ve got Google here, or Chrome and we type in WordPress Themes Free.  We’re going to get a lot of stuff.  There are even blog posts dedicated to 41 great looking WordPress themes and it would seem that if you are working on a project that is maybe a little bit beyond your skill set, it feels like maybe it’s a really good idea to go and just download a theme and then modify that theme.  It seems pretty reasonable to so that and a lot of people end up going down this route.  Ultimately it is of my opinion that I don’t know that this is always the best solution.  I think it can be a good solution for some but eventually you outgrow themes because you want something to be a little bit more customised to your business or to your needs.  So often times that when people like us step into the fold and we add in maybe they want a slideshow on this theme.  Well then we would have to go through and build a slideshow.  Maybe we use J-Query, maybe we use a plug-in for WordPress or maybe we just make it from scratch.  So that is a huge part of this particular industry.  I get commission a lot to fix peoples WordPress code.  They think ‘I need you to fix WordPress’ and it’s nothing to do with WordPress ever because WordPress can only make three things.  Do you remember what those three things are?

[0:11:14.6]

Nope.  HTML, CSS and sometimes Java Script.  That’s what it makes for you in the end.  So you’re problems are always a HTML, CSS or Java Script problem.  They’re very rarely a WordPress problem.

how to modify a theme
Awesome.  So now that we know a little bit about this paradox I’m going to first teach you how to modify a theme and then we’re going to make our own theme.  Now WordPress has a pretty interesting approach and that approach is through these theme header, background and editor.  So let’s just start at the editor and at first glance this seems like it’s an awesome idea, this is all of the files that make up this particular theme and we see it in a text area and we can modify any one of these files here inside of the web browser so we don’t need an FPP login, it’s pretty awesome.  Not so much and here’s why.  There has definitely been countless times where WordPress chokes and you’ll update a file and you’ll hit this button here and somewhere between here and that transaction process it fails and you know what happens to the file?  It’s gone.  So now all of a sudden you thought you were just making a small update and the main piece of your site is no longer in existence.  You quickly ask yourself did you make backups and you’re like no because this is a quick project that I was just working on and you’re like oh.  You step away, get a cup of coffee, bang your head on the wall then you come back and you start all over.  That’s why [0:13:02.0] is often B2W, that’s why it’s really, really awesome. 

this is a really dangerous place
So this is a really dangerous place.  It’s especially dangerous because I have definitely had client’s come in and say oh I’ll just come in and change a couple of things, I don’t know what any of this means, select all – delete – post and it’s gone!  No revisions, no history, it’s just gone.  Pretty dangerous however, in a pinch if you have to do it just be careful and cross your fingers a lot, that would be my suggestion.  If you can always get to the actual file that is way better than using this particular system.  Especially, on our local system here the transaction takes a lot longer than you really want so what if you hit update and you hit update file a couple of times and you’re like not willing to wait for it and you close out of the tab.  You could have just crushed your file.  Not good times, not good times at all.  Any questions about that?  Awesome, okay.

They’re going to want to change as many things about their site as possible.
You have the ability to do editor and depending on how the theme has been programmed either by you or by somebody else you might have additional features like the ability to change the background image on the home page.  You might have the ability to change the header on the home page.  You might even have the ability to tie into each of these random images.  These are the kind of features that if you can build them you should definitely build them for your client and customers because they’re going to want to change as many things about their site as possible.  This is really awesome stuff.  There’s also the ability, if you program it in, to change the orientation of the layout.  Whether or not to have a sidebar, to not have a side bar or to flip where the sidebar is.  These are all features that you can program through the WordPress system.  It’s pretty cool, it’s pretty cool. 

templates are not always the right answer
Alright so let’s say for example here we are and I would like to change, make an update and so a client comes to me and says ‘hey Josh love what you’ve done here with this default WordPress, I love it there’s just one thing man like I would really really like if all of these headlines over here could be in red.  Can we make that happen?’  Now in the olden days of web design and when we did web design in caves we were like alright, we’ll just guess where we think that’s at but now we have robust tools like the development inspector it’s so much easier.  We can right click on it, go to inspect element and find out exactly what makes this happen.  This is the widget title and it is on CSS line 1779.  This is yet another example of why I think that templates are not always the right answer.  This is line 1700 are you serious?  What’s so crazy about this template that it requires 2000 lines of CSS code?  So we’re going to ask people on all devices and browsers to download, I think that we can do it better.   Although I am a big proponent of making things handmade.  So these are just my opinions that I’m talking here.  In the business world that moves really quick, sometimes you just have to work with templates.  I’ve definitely worked with templates before.

locate the style
So here we are 1779 – that means that if I can locate the style document and go to CSS line 1779 I should be able to change this colour to any other colour that I want for example, like red that’s 00 and it should change this to red.  So now I just have to go and locate the file. Well if you remember we’re working in the themes files, this is 2011.  Inside here there is a styles.css and I can take this and I can open it in my favourite text editor, or Dreamweaver, get it boomch and we can make that adjustment.  Being a modern web designer is so awesome because of those kinds of tools that we have.  So now we have to find line 1776ish of whatever and here it is and we can change this to F00 and while we’re at it why don’t I make the font size 28, we’re going bigger.  As soon as I save this and refresh it, now I have made an awesome update to my site.  Like I said I get commissioned a lot to do things of this level because WordPress feels very complex to people, they’re like ‘I don’t know how to do this’.  I did a job just a couple of weeks ago where all I really did I repositioned some type, used a web font and changed like an image or something.  Yes sir?

[0:18:10.6]

Some do, there are some responsive things yeah.  And so the idea of themes is really just HTML and CSS and so we can make, in my opinion, much better themes that are out there, responsive or not.  I don’t know if this particular one is responsive.  I think I’m not sure, I think the 2012 is responsive.

[0:18:52.4]

Oh does it not? 

[0:18:48.3]

Because these are just demonstration files and they are overly bloated on purpose to try to demo every feature that WordPress has to offer, that’s often times why I don’t think that these are the best things to use in production but really great to use for education. 

Alright so we just changed it to the other theme and let’s see, yeah you’re right, no I guess this would be considered… oops… responsive because we click on menu and the menu opens up so..

[0:19:22.2]

Maybe 2011. 

[0:19:27.1]

Yeah, oh well that’s the… that’s the admin… yeah yeah I wouldn’t worry about that. 

So that’s how we can modify current themes that exist because you very well could walk into an internship or a new job where that’s going to be you thing.  Like you know what man we’re still busy but we have a couple of updates that we want to do on a current job, that’s typically where you kind of start off.  Most of the places I started off with those were the first kinds of tasks that I did with some sort of website maintenance on a Content Management System.  Are there any questions about being able to locate the kind of things that you need to change?  Alright, yes sir?

[0:20:15.0]

So how I did that is I right clicked on the thing that I wanted to change, I inspect the file and it told me exactly what CSS line to change.

[0:20:28.3]

In your folder structure the styles are not in a CSS folder they are just hanging out right next to the index. 

Alright this next thing that I want to bring up before we get real deep.  If you start poking around with some of these theme files which I highly recommend that you do, especially the ones provided by WordPress, they’re built really well.  When you open this up in your favourite text editor or Dreamweaver you’re going to see some things that kind of freak you out.  Here’s an index file but what are we missing? 

[0:21:07.1]

how is this possible? Oh my god, crazy! 
Yeah we’re missing the doc type and everything like how is this possible? Oh my god, crazy!  Well what’s really happening is that this is being templatised and this is something that we don’t really talk a whole lot about but let’s think about this, if this is our document there’s typically a masthead and there’s typically a navigation.  There’s typically some sort of like title up here in the title bar and then we have our content, we have probably sidebars and we have our twitter.  Well the way the WordPress works is like well we have the same masthead and navigation on every page, why don’t we split this up and we’re going to put this in a separate file called Header.php.  So that’s where your file actually begins.  Index is only this part in here which is known as the Post like this is where the page and the posts go.  You’re not going to see too much other than that.  So when we take a look at this file here we see just our post stuff and sidebar and footer are being brought in via include style if you will.  That’s how this is split up.  So the first time that you enter into somebody else’s WordPress solution it’s a little overwhelming, especially if you’re client ask you to make a change to the navigation bar.  Maybe it’s a HTML change that you have to modify not just a CSS change.  Like ‘woah how do I do that, where’s it at?’ well it could be in your index or it could be in your header.  So let’s go and find header.  Here’s our doctype and here’s all of our IE conditionals.  See like this is really bloated.  Here’s our titles, our style sheets, all that stuff and then eventually we’ll find somewhere through here we have our navigation system which is right here. 

[0:23:23.5]

making assumptions about how I should start my project
I do think it’s too much because this is making assumptions about how I should start my project but my project maybe it’s an internal project and so if it’s an internal project here then I don’t have to worry about a lot of these style sheet conditionals you know.  Maybe it’s a project that’s spec’d only for mobile, maybe it’s a project that’s spec’d only for IE6 for some sort of reason.  These are really great to learn from to see strategies but there’s so much extra things in here that you probably don’t require.  I don’t think that I can say that enough.  I really believe at least as a hobbyist and a craftsman to try to build things from scratch as much as possible just so you know how they work.  Even if you can’t do that in your job just knowing how it works will help you solve problems when things break because they will break, they absolutely will break.  So that’s a little bit about how this system sort of works.  Any questions about that?

Alright, well, if we take a look at this theme here the first time I opened up one of these themes I was like ‘oh my goodness, do I really need all of these things?’  The answer is no.  In order to make your own customer WordPress theme all you need are three files, that’s it!  Those three files are an index.php, a style.css and this is optional but I think it’s a good one to have so a screenshot.png.  If you have these three files you can create your own WordPress theme.  And so that’s what we’re going to do right now, we’re going to make our very own WordPress theme. 

So in themes folder I’m going to create a brand new folder here and we’re going to call it Awesome Theme.  Inside of Awesome Theme I’m going to create a brand new document Index.php.  Oh you know what I’m not going to be able to do it this way because my, I think my files are being, my file path… no, no, no I’ll be able to do it sorry.  New Text Document – Index.php – and a new text document – style.csi.  Yes sir?

[0:27:26.2]

Yes it did because you probably aren’t showing your file extensions.  So let’s do it this way.  We’ll go about this in another way so we don’t have to worry about operating systems because if you’re on a Mac you can’t create files that way anyway.  So let’s do it like this.  I’ll delete both of those files and inside of Dreamweaver I’m going to go to File New – I’ll choose HTML – and I’ll pick HTML 5 – Create (I guess I could have picked PHP) and then I’ll – Save As – MIC – Program Files – Xamp – WWW – WordPress Workshop – WordPress WP Content – Themes – Awesome Theme – Index.php.  Another file here and I’ll make a CSS file and create it and we’ll save it in the same place but we’ll call it style.css.  So I’ll give you a moment to get that rocking and rolling.  If we try to activate this theme right now, if I got here and hit refresh I’ll recognise that there’s something there, come on you can do it!  Yay! Here it is, here’s our awesome theme that we just made.  Isn’t that amazing?  If we try to activate it it will switch everything over… yes sir?

[0:29:38.4]

we’ve now activated Awesome Theme
Yep, we’ve now activated Awesome Theme and you ready to see what our website looks like?  Refresh.  That’s what it looks like – Untitled Document because that’s what we did, we changed everything to an untitled document.  Pretty neat though huh?  So that’s all it takes to make a theme.  Now I highly recommend that we also create a screen shot and so typically when I create a screen shot what I’ll do is I’ll take one of the screen shots from another theme and open it up inside of Photoshop.  I’ll let Photoshop load here and then I’ll go and grab that file and then this is where whatever your design looks like you can [0:30:56.8].  So, I’ll just do this – My Awesome Theme J and all you have to do is save this out inside of our Awesome Theme and call it Screenshot.png.   Now that that is saved there, when we refresh inside of our dashboard here, wait for it, wait for it, wait for it, there it is, here’s the screenshot.  So typically whenever you’ve designed whatever your website’s going to look like you’ll do a screen cap of it and then just place it as a little thumbnail inside a screenshot.png.  This really doesn’t affect how your theme works, it’s mostly just as a reference to you.  Any questions about that?

[0:32:05.7]

Inside of the Awesome Theme folder so right now I only have three files inside of my Awesome Theme folder.  I have an index.php, I have a screenshot.png and I have a styles.css.  That’s it and that’s all it takes to make a theme.  Now although we have this amazing theme here right there’s a huge disconnect because we have WordPress here as an admin tool and then we have over here, we have our theme.  Our goal now is to create some sort of connection between these two things here by writing out a couple of WordPress functions.  By using these WordPress functions that means that we can have a client type in information inside of a post and hit publish and all of that stuff will go to the database and then our theme understands to look at that database to output all of that information in our theme.  That’s how this works.  Does that make sense?  Any questions about that concept?

Process
Alright well I have prepared a theme for us to use.  Let me talk a little bit about my process before we do that.  Whenever I’m working on a project specifically a project like WordPress the first thing that I do is I do mark-up and only mark-up, provided that the design is done.  That means all I do is just HTML tags here, that’s it, only HTML and you’ll see things in a really long list you know just like default style.  Then I’ll go to the phase where I do CSS, that’s where I get everything arranged kind of where I want and when I’m done what I have is a web prototype.  So this by and large looks and feels like how the website’s going to work but it’s not dynamic, it’s completely static but you can go through decision with your client to say this is how we want things to work, yeah that’s going to work out that’s totally cool, we’ll do this, we’ll do that.  Then I go into this thing that’s totally a word that I’ve made up, I WordPressify the solution.  That’s where I go through and I connect the two parts together.  I connect the admin to the theme so that these two things can talk to one another.  I provided an example on exactly what I’m talking about on GetHub if you would like to download it you can find it at gethub.com/joshstegher/code-examples and at the very, very bottom here you can go to WordPress Bootcamp so if you go to gethub.com/joshstegher/Code-Examples then at the very bottom you’ll see a WordPress bootcamp.  You can choose to download the archive zip.  Before I do that I’ll just kind of click in here just to show you what it’s all about.  I’ve two things here, I have a WordPress website demo that has how I go about a project and I also have a cheat sheet, sort of a greatest hits album of the things that you probably want to know.  Inside the WordPress website demo you’ll see that I have a proofs folder.  This is what I call my proof of concept.  Almost every project that I ever worked on there’s something that I don’t know how to do, this is where I practice those things to make sure that I know how to do them.  Then I have it delivered.  Inside the delivered folder these are all the different versions of the project at various stages.  In the very beginning that’s just the mark-up, that’s when the mark-up is finished, that’s when the CSS is started, that’s when the CSS is finished, this is when we’re getting ready to do WordPress stuff and then at the very end at this 007 is the WordPressify Solution.  So I’m giving all of these things to you.  Business Docs is where I put things like contracts and any other things that we need.  The bin is where I do all of my work.  Assets are things like user interface design, documents, logos, all those kinds of things.  That’s kind of how that works.  Any questions about that structure?  Everybody has their own sort of structure, that’s just sort of how I run mine and furthermore I change it all the time because I learn new tricks.  So to download this I want you to click on archive and then click on raw and we’ll give that a moment to download and what we’re going to do is in our Awesome Theme folder here we’re going to extract one of our themes that we’ve developed.  Cool.  Awesome. 

We’ll go… I think those are all empty, that’s right.  So under Projects – Folder – Example inside of there you’ll see a bin, no I’m sorry WordPress Website Demo – Bin.  We’ll grab Whale Theme Version 6 and Whale Theme Version 7 and we’ll pass both of those things inside of here.  So we’ve just installed two themes into WordPress.  Whale Theme Version 6 is an HTML document that I’ve gone through and I’ve authored and it looks like I have a little problem with my [0:39:30.2] bar up here.  This is a HTML document that I’ve authored about the awesome book Moby Dick.  You can see that we have our navigation system up here, how we can buy the book and we have different highlighted images that we want for a sidebar.  Over here we have our cute little whale down at the bottom and all of our content.  So this is typically how I would go, this is a static document and what we want to do is we want to replace some of these static elements with some of the dynamic elements.  Now we’re not going to be able to do everything today but we’ll be able to do a couple of things and so if we go back to WordPress, the admin tool and hit refresh we’ll see Ishmel the White Whale.  We should see two of them though. 

[0:40:42.9]

yeah it has to have the style sheet in it
Hmm, oh yeah yeah it has to have the style sheet in it, yeah so that’s totally right.  Okay let me take a step back.  I probably shouldn’t have had you install Whale Theme Version .06 that was probably a mistake because we are missing one of the clear files that we need to get this going and that’s the styles.css.  So that was my fault I should have done that.  Why don’t we, we’ll delete version 6 since we’re short on time and leave just version 7 and we will refresh.  Awesome and then we’ll activate this theme.  That was my mistake now whenever we go to our website we have our awesome theme.  It looks like we still have a little bit of clean-up to do but for the most part this is what we’ve designed.  It’s got our navigation system at the top, it has our search over here to the right, it’s got our sidebar, it has our happy little cute whale down here at the bottom, looks like we just forgot to style some of our lengths.  I did yeah yeah, thank you, thank you.  That’s really great so why don’t we take a look at some of the files in this whale theme version .07.  The first thing I want you to do is open up the style of that CSS document.  These items here are required for WordPress to know what the theme is all about so you see it says that this theme is called the White Whale by Ismail version 1.0, it’s my Amazing WordPress theme, all of that comes from here so if I were to change this to the orange whale then that would update right here so, all of this description comes from the style document.  You’ll also note that I don’t have any styles in this style document, that’s a really common practice because I like to have all my styles in a CSS folder.  So I actually have a couple of style documents that make up this particular project.  You’ll see in my CSS folder I have our typical reset and our typical CSS, all of this should look fairly straightforward to you.  This is how I made everything work.  This is a typical reset from our good buddy Irk Myer.  Now let’s look at some of the goodies.  This index.php and the first thing that I want you to take a look at is this command right through here on line 29.  Line 29 is the WordPress function that grabs all of the navigation that is inside of the WordPress system and puts it on the screen.  If this didn’t exist here and I was like yeah, awesome, whenever we take a look at our great WordPress website my navigation here had all of that blah blah through it.  So to actually get the navigation to work this function does it.  What makes that so amazing is let’s say I go to my awesome page here and I add a new page that’s called I Pen 13 in a Row and I publish that, now my website has adjusted and here I have I Pen 13 in a Row.  That’s what makes this system so remarkable. 

 You might have to modify a couple of things here and there
There are a few other things to take note, this part right here is a straight up copy and paste that I have provided to you in the cheat sheet.  All you really have to know about this thing right here is grabs the content from the WordPress system.  That’s what it does.  You might have to modify a couple of things here and there, maybe you want to change how the date is being formatted, maybe you want to have the author, maybe you don’t and all of these commands are what make up the WordPress system and so typically how it works is… let me open up… let me go back here and toss this in here again.  If we had a clean file like this one here and I come to my navigation system, the first thing that I have to do is get rid of all of this part here and I would [0:46:23.1].  I come to here and I’ll be like alright, peace!  That’s how that works and then like all of this content through here, I’m like alright, well here we go, we’re going to take all of you, thanks you did me great but I’m going to replace you with this loop system and bam, there we go! That’s how it works!  It’s a replace, you replace the static parts with the dynamic parts.  There’s a real common thing that you do for your title so that your title is dynamic and it changes for the page that you’re on.  Oh I just grab that and I say okay title tag bam!  And this is how I WordPressify my projects and my themes.  That’s by and large the majority of what I’m doing.  There are a lot of custom things that you can do, you can write your own PHP command, create conditional statements, you can get really, really deep especially with sidebars and some of the other things but by and large this is the basics on making it happen.  Any questions about that?

Well on GitHub I have this cheat sheet
Well on GitHub I have this cheat sheet because you’re probably wondering well, how do you know what to put where.  This cheat sheet has a lot of those things that I just described.  This is the post code, this is the navigation code, this is the title code.  You can copy and paste these things and they work immediately, this is the styles code to get things started. 

the last thing that I want to leave you with
Now the last thing that I want to leave you with because I bet there’s another class that’s coming in here.  I’m going to try to squeeze this in.  [0:48:27.6] problem [0:48:29.9] whenever you’re doing your WordPress theme, index.php… oh that was crazy… try that again.  It’s going to be angry at me… let’s try to rename it.  Can you rename it, you can do it, there you go… php… okay awesome we’re going to get rid of that and I’m just going to steal the style document here… awesome.  Oh right.  So here we are now in our WordPress system, we go to our theme area, we want to activate our brand new thing, we put our style document in, it’s going, it’s going, it’s going, it’s going… looks like its crashing of course… okay so here we are we have our White Whale, we activate our White Whale it’s going to be great and it’s going, it’s going, come on you can do it.  The first thing that you’ll notice when you start your project off is that all of your styles break immediately, all of them break and you’re like what let’s look at my page stores.  I’m saying CSS style but why is that busted.  You remember why?

[0:50:03.7]

No it reads it from a folder.  It’s because of the masking thing, because if we do this it thinks that this file is actually three folders over here.  That’s terrible we do not want to physically put ../…./ we don’t want to do that.  Instead we do this crazy trick writing WordPress code  - ah come back, come back, come back this is how we’re going to end with this right here is you use this php template blog info to get whatever the file path is.  You grab that, you come into Dreamweaver and you replace one little part here with this php command.  Wait let me open up the right file.  Dreamweaver and what’s going on here… frozen… there we go, there we go and we replace this style here with this command that can catnip the URL template.  Save this, I come back to my view source and you ready, you ready, bam!  It fills that in for you automatically.  It is a math a crazy math so now when I come here, you ready, bam! Uh oh that didn’t work.  It should have worked but whatever you get the idea.  I’m probably just looking at the wrong thing but anyhow we’ve got to close this up because we got to get other people in here.  You’ve been an awesome audience, thank you very much I will be providing this recording for you so have a wonderful day and always validate your code.



About the instructor...

 Josh Sager
Joshua is the Founder of Second Block Studio and the Program Director of Multimedia Technologies for the Pittsburgh Technical Institute where he writes and teaches courses in web design and development He frequently teaches workshops on design, development and printmaking to teens as well as working professionals. Joshua is passionate about interactive technologies and loves to build things for all sizes and devices. Previously, he has spoken at conferences such as Web Design Day, FlashBelt, FlashPitt and Podcamp Pittsburgh.


 


Learn more about the Web Interactive Program



Leave a reply

Your email address will not be published. Required Fields are marked *


subscribe to Video Workshops