Web Design Specialist – LIVE Q&A #2

hey everyone this is craig here again from VA classroom calm and welcome to our second and final Q&A screencast for the web design specialist program i’m here with the kind of the number one trainer and our faculty member for web design amanda akin hey Amanda hello hi everybody yeah good to have you all here today and again this this session is really all about you know we’ve compiled some of your questions from the last couple weeks and a man is kind of prepared a presentation based on that and then if there’s time at the end if there’s some live questions will definitely take those as well so I think this is going to be a really productive time so all that with that being said I’ll pass it over to Amanda very good okay so hello everybody it’s the super fun getting to know you all um on the message board and seeing how you guys are progressing with the content in the course and that’s how we definitely have some interesting and juicy questions to cover today so I guess I’m just gonna dive right in so the first question we have and just so you know if I don’t cover all your questions I will come back to your question you added later towards the end i’m just doing them in chronological order so the first question we have is from Jennifer and Jennifer says hi Amanda does the thesis nav menu come in individual boxes that can be separated into individual buttons or does it tend to stick to being a bar so this is a great question when it comes to the navbar that comes with thesis or the the menu that you would set up within thesis and WordPress it will generally by default will by default look like more bars so for example here on the girls back web design side we’ve got this white bar that goes across the width of the site but like everything in thesis you can change that as much as you want so actually there’s a great tutorial I think I shared the link in the on the message board a couple weeks ago or maybe a week ago but but in case you missed that I want to show you guys this this is a tutorial I’ll i’ll post see all the links and sort of all the important bits of code and things that i go through in today’s webinar on the message board so if you guys couldn’t go back and refer to it later so i’ll post the link to this way after we’re done with the webinar but here we are on this great sort of guide to styling the nav menu this is a house on the DIY themes site so they’ve got tons of great content available for public consumption here on the site this is inside the user’s guide which i believe actually no i don’t think you need to be logged into the DIY themes site to see it so i think this is really truly public and they’ve got a few cool ideas here for things you can do with your nav menu so um you know they’re calling this one for example minimis simplicity or minimalist simplicity and you know the ribbon effect where you see here on the Left there’s this kind of looks like a ribbon is kind of coming down off the edge of the nav bar and stuff like that and what you’re asking about Jennifer is sort of a look I’m if I understand you correctly a look that’s kind of similar to this so it looks like you’ve got kind of a button behind each item in your navigation bar so if you want to do this on your site all you have to do is copy this code that give you CSS code we’re going to put in our custom dot CSS file and you can see how it looks and then you can tweak it so it’s not saying that you absolutely have to have a gray you know background color with great colors and that kind of thing you can always tweak that after but this is a great starting point because it will give you sort of some base code to work with so let’s see what happens we’ll go back to my um my hideous test fight that i use for things like this and this is as you can see at the top to serve regular-looking navbar so it’s got a bunch of different test pages listed it’s gray and it’s white and we can of course go into design options to change certain things about the navbar actually quite a lot of things when it comes to colors and stuff like that here in this middle area so now then you got the color of the tag in different states so you know when you hover over it or when you want it’s like a parent link when you’re on a child page meaning a page that’s like appearing below a parent item and a drop-down menu you can put fool around with all these settings but if you want to do something a little more advanced like what we’re seeing here on this tutorial on the DIY theme site then you’re going to need to get into adding some CSS code so I’m just going to paste this code into our custom dot CSS file just going to go down to the bottom here paste it in Save button and let’s go back to the site and refresh and you can see the navbar has changed into this much more slick looking look with the actual individual buttons behind each menu item so if I didn’t want it to be gray in the background or I didn’t want anything to be gray and I want to use you know blue or purple or whatever I could absolutely do that by using Firebug so I would just open up Firebug there we go folks a little slow on the uptake today and for example if I want to get rid of this gray background color I’m going to click first I’ve chosen the little blue arrow selection tool here at the bottom left or the top left the left Firebug pain and that lets me select things when I move my mouse around and I’m going to click once on this gray background color to kind of freeze the code in place in both the bottom pains here in Firebug and I’m going to look for something that refers to a background color and the cool thing about Firebug is here in the first chunk of code I don’t really see anything about background color it’s talking about other stuff unrelated to background but then the second chunk of code I see the background is set to be this hex code which is six C’s which creates a great color and you can see when you mouse over it that that great bock-bock that appears is the same as the color you see at the top of the page so if I wanted to change this to just waiting for example I can change it there in Firebug and then I would take this code I’m going to copy it so I’m taking to take this whole chunk and we’re going to put it into our custom dot CSS file because whatever we do in Firebug remember we’re just previewing so by adding code in here a changing code that’s here we can see in real time what’s happening on the site we’re not actually putting the changes in place so I’ve copied this code and if I close Firebug and just to demonstrate that I’m going to refresh the page here and you can see that the gray background color has returned even though I entered a different background color and Firebug and that’s because fire bucket is showing us to preview so now if I go back to the custom file editor I’m just going to go down to the bottom I’m going to paste in when I got out of fire bug and I’m in remove all the code that I’m not bothering with at this point I’m so the only thing I had tried to preview or change using Firebug was the background color so I don’t need this other stuff it just clogs up your custom CSS file so I’m going to delete that stuff and I’m actually I don’t even need this stuff either there are some other sort of combine CSS style rules preceding the background color and I’m just going to leave it like that and in case you’re wondering when CSS there are certain things that are kind of like shorthand I guess is the best way to describe it so I taught you in the course when you want to set a background color to use background color like this but background will also work so that’s just one of those little shortcuts if you wanted to save a few keystrokes so if i save this now and we go back to look at the a kiss from Paris site and refresh now you can see that the background color is gone because I’ve actually put the instructions in custom dot CSS so that’s just a little preview of things you can do with your navbar but really it’s kind of the sky’s the limit with this so you can change colours you can go back into the custom file editor and tweak other things that are here in this code um it’s really up to you but you’re not bound to having a bar-shaped now menu whatsoever that’s one of the cool things about thesis you can turn things into whatever you want okay so i’ll post that the link to that tutorial on the message board after the webinar so you can refer back to it another question from Jennifer is also I noticed in the video where you make a custom nav menu that it came up automatically side by side across the top is it possible to make it run down the side of a page so yes the answer is it is definitely possible you would need to use some PHP code to make this happen but I actually have luckily a chunk of code that we can use for exactly that and I’ll share it with you guys because it is one of those nice things that it’s it’s just nice to be able to do it easily if that’s the kind of look you want to go for on the site you’re designing so I just want to show you this a war you very brave site this is a site i designed a couple years ago and they this is a thesis based site and they have on the left their menus or instead of having it along the top which is what happens by default with with wordpress and pieces they wanted it to be on the left so i use the same chunk of code that i’m about to show you to make the menu appear in the sidebar here as i did um stay here cause i’m about to show you so I actually have a file open here that you guys can’t see but I’m just going to grab that code and again I’ll share this with you guys later but this is code it’s going to go in custom functions dot PHP because it’s PHP code so remember we only ever put CSS in custom CSS and we only ever put PHP in custom functions PHP so I’m going to just hit enter a few times to just make a little space visually between the comments here and the chunk of code that I’m pasting in so I just paste it in this code and just going to make sure there are no empty spaces at the end you saw there there looks like there’s a couple of lines here underneath or following the last bit of code and it’s always a good practice whenever you’re doing anything in custom functions dot PHP to make sure that you don’t have extra spaces after the final chunk of code you have in the file because that can sometimes cause problems not always but sometimes just one of those annoying things photo about PHP is a little more finicky than CSS so I’m going to save this and if I go back here to arc is from parasite as you’ll see the menus up here on the top but if i refresh we’ve now got it here in the right sidebar now it doesn’t look so good and it’s for some reason overlapping um this other thing we have here and I think that’s because I had set some negative margins or something for this this chunk of stuff in the sidebar or something like that but if you haven’t done anything weird like that to your site then it should work like a charm for you and I think what it’s actually doing is it’s filling up the yeah i think it’s filling up the natural sort of defined width of the cyber which is why we have this home tab and this test page five top side by side because they are able just to fit side by side within the width of the sidebar so if you wanted to tweak that you might have to use Firebug to specify that each menu item should be a specific width so you’d want to set each one to be slightly wider and then these two wouldn’t be able to fit on the same line so you get every menu item stacked one on top of the other which is probably your desired effect and of course that won’t be a problem anyway if your menu items have more text on them than mind you so you might need to tinker a little bit but you can probably just grab the code i’m going to post something on the a message board and you can just put that in your custom PHP file one note when it comes to editing your custom functions PHP file it’s definitely a good idea I know we kept those before but i just want to mention it again it’s definitely a good idea to take a backup of your file so the easiest way to do that is to connect to your site via FTP to navigate to that file and i’ll post vm the file path just as a reminder so that you know once you connect to your site via ftp in filezilla ok how do I find the custom function stop PHP file so I’ll tell you how to do that you have that as a reference and all you have to do is download the file to your computer before you make any changes to it so the idea is you want to have the thought the last known working version of custom functions PHP save to your computer just as a backup so then if you put something in custom functions PHP and you get locked out of your sight which usually looks like you try to access your site and all you see is a white screen with like a black error message at the top in Times New Roman font then all you have to do is go back into your FTP and reupload the backup that you had just taken so you’re going to be replacing the file on the server that now has some code with a problem in it with the one that you had you know was working and you would save to your computer already so it’s just the basic principle of replacing a file that might have apparently has a problem with it with the one you know doesn’t have any problems so that’s a very quick fix if you ever run into that and don’t worry I know it’s a scary thing when that does happen but it happens all the time so as long as you know as long as you remember to keep a backup just take a backup before you make any changes to custom function key PHP then you are going to be golden so what I’m going to do is I’m actually going to remove this code for now because I think I have to show you something else in a minute that it’s going to interfere so let’s just double check that the menu has gone back to horizontal orientation and it has ok so that’s good um yeah so the next question from Jennifer has to do with headers Jennifer asks can you place different headers on each page yeah so this is definitely a great thing to know how do its kind of it adds I I think to the richness of the experience on a website if every page or at least certain pages have different hundred images so you don’t it gives a more sort of customized feel to give you an example this is a said I designed that since been changed a bit by Rica the owner of the site who is very lovely person I loved working with her um but we do have two different header images i believe on this site so this is her header image up here if you’re on most pages of the site and then if you click on the blog there’s this different header image milk bar is kind of the theme of her blog she’s got all kinds of things about making nut milk and stuff like that pretty neat so in terms of how to do this I will also post up the link to a tutorial that’s also here on the DIY themes site there are two ways you can do it there’s the CSS method and it’s it’s easier than the other method which involves using PHP so I would recommend that you try you’re going to try this you try the CSS method so it’s pretty nicely outlined here on this page and i’ll post the link but the PHP method lets you get a little bit more sort of intense with your rules but what header image should appear when like you can say this header image should only appear on this page if this condition is met and that kind of thing so it adds that extra layer of complexity but most of you shouldn’t need to do that I mean if you do there’s a primer to in on this page but the cdss method should be good for for you guys for the most part the i believe i use PHP to do it on this site but it was definitely a bit a bit finicky I mean PHP is definitely going to be more just more involved no matter what you’re doing with it so i’ll post the link to this tutorial so that you guys can check that out if you like the idea of having different header images on different sites but basically all you’ll do is you’ll create your different header images you’ll upload them to your web server via FTP um and then you’ll just have to make note of the file path complete URL in other words for each image you’ve uploaded and then you can follow the method in this in this article that will tell you how to basically tell thesis to show this header image on one page and this other file for the header image on another page so that’s it in a nutshell now we have a question from lisa and lisa says is there a way to get facebook to link with one particular image for my URL without it overriding the images that i want displayed with blog posts i think it’s really only a problem when sharing a link to my website in comments on facebook my tongue little icon is what is chosen as the image from my homepage URL i tried to google it but the solutions i found would cause one image to be displayed for the entire site if it’s too complicated to deal with for the Q&A or you don’t know don’t worry about it i’m just wondering if it there might be some kind of simple solution that you know of okay so this is a great question Lisa it’s definitely possible to do this but it’s going to require some sort of fancy PHP stuff or you might be able to find a plug-in that would let you do that I haven’t had much love to be honest with these types of there are all these plugins now that are supposed to allow you complete control over you know which image gets shown on facebook depending on what type of you know link from your site someone is sharing so I think I’ve come across a few that are supposed to let you specify you know if someone’s on homepage show this image when somebody shares the URL on facebook but if somebody’s on the post then pull the major image from the post but I’ve never really gotten any of them to work properly I think when it comes right down to it this is one of those things that’s much better handled with uh you know actually being hand coded in PHP and that being said it’s kind of outside the scope of anything we’ve looked at this might be a good thing for you to get higher it out just for like a one small project type of thing and then you can just reuse the code and make a few tweaks for other clients sites that you’re building that’s what I do um but I think it would be best if you probably go directly to a PHP developer on that because they’re the people who are constantly keeping up to date with all the changes that facebook makes to their their code because they do change make changes all the time it’s crazy like they I have a friend and I’m actually going to recommend you contact him I have a friend who and some you know has a great series of posts on this blog about how to do exactly what you’re asking to do I mean not necessarily show one image for the home page and a different image for elsewhere but you know how to get the image thumbnail pick up stuff have any working normally with Facebook so that you get the image that you know actually represents your site showing up when someone shares your URL on facebook are you sure your URL on facebook and he’s had to keep redoing his tutorials time and time again because facebook is always changing stuff on their kind of back-end the code so um this is one of those things that I would say it’s best unless you can find a plug-in that magically works best handled by an expert um my I think I’ve told you guys about before my main go-to guy for stuff like this his name is Jason and he works at a company called design PX he’s the creative director there and he um he’s just wonderful he’s wonderful to work with and it was happy to work on you know small projects big project so you could work with him you can email him at Jason at design p x com and that’s just design and then the letter P and the letter X and he tell him that a mandate consent you he’ll um he’ll take extra good care of you he’s been very nice that way I prefer people to him a lot they’re always very happy with this work so and you cannot even ask him you know I would like to be able to reuse this code on different sites for my clients so could you deliver it to me you know in an email in addition to putting it in place on this site could you deliver it to me in an email with portions of the code highlighted in red that I would need to change and they would just be things like not actual coding things but things like a URL for an image or like the Facebook I don’t know that face ID for the page that you won’t you’re going to be linking to and that kind of thing so it’s nothing too crazy but it would just let you kind of tweak and drop in the correct values and in theory it should then work on other sites so it might be a good investment um okay next question is from Jacqueline Jacqueline says I’ve tried everything to get the drop cap to change colors but it stays gray here’s the CSS code I have and she gave me her code she’s using um she says it looks perfect in Firebug but when I copy it over it continues to stay gray any ideas what I’m doing wrong um off the top of my head Jacqueline I don’t think you must not have had a chance to see it i just posted it this morning in the thread about the questions for today’s webinar if you could email me the URL for your site that will be very helpful as well as your wordpress login information if you’re comfortable if not just that you can even just post the URL for your site on the message board and I can go and have a look because that’s one of those things it’s much easier to be able to help you with if I can actually see what’s happening with the code on your specific site so I’m happy to help you with that um after the fact ok now we have a question from katie and katie says hi Amanda if you have time during this Q&A I would really appreciate a demo of the widget logic plugin so i can add different menus down the sides of pages yes ok so for those of you who haven’t ever heard of the widget logic plugin i’m going to give you a brief um brief rundown so let’s see here this is the home page for the widget logic plugins this is like every or like most plugins that are available for wordpress and this one has its own page where you can learn all about the plugin you can click these different links here on along the top and find out more you can see how many people have downloaded it and how do people rated it and is not kind of thing so this is a very popular plugin it’s had 399 over three hundred ninety-nine thousand downloads which is pretty good and it’s great because the way it works is it allows you to say okay let’s say I have these two different items in my sidebar so two different widgets like you’ve got to text widgets or you’ve got like a calendar widget and a text widget and you only want the calendar widget to appear on one of the pages in your site and you don’t want it to appear on any others well the widget logic plug-in lets you do that so let’s you say okay I don’t want this to show on this page or I do want this to show on this page or whatever so the reason that it’s called widget logic is obviously it has to do with widgets and the logic aspect comes in when you think about come the fact you’re going to be kind of coming up with these logical statements and logic is very much at the center of that the learning PHP world so that’s where the name comes from you’ll see what I mean in a second I think so the first thing if you want to use this on your site is to install widget logic so you can find it I already have I’ve already gone ahead and have installed it but you can just search for it under plugins so you just click add new and you search for it and install it the way you would any other plugin and what it does is once you have it on your side if you go into the widgets area which is of course what controls everything in your sidebar you’ll see you could say I open up this widget here at the top of my sidebar which is that redbox I have going it says at the bottom that’s got this which I’m just going to delete this was for my example so you will get this extra box here that says widget logic and you can type in here so and this will appear I’m just going to show you this will appear at in every widgetbox so you got that option to type something in the widget logic box for every widget so how does it work well let’s say for example see here let’s say if you want to show that redbox so here’s the red box and let’s say we want to only show it on this page called test page 5 that I’ve got here so this is test page 5 please you here I’m just going to delete make sure this is saved what I’ve done before okay there we go so right now we’re on test page five and you can see that there it’s the red box appearing because I haven’t put anything in any kind of widget logic boxes and of course anything you put in the sidebar here under appearance and widgets it’s going to appear on all pages until you’ve done something with widget logic so if I want the red box to only appear on that page called test page five what I’m going to do is I need to write a little bit of PHP code and don’t worry this isn’t as scary as it sounds um in the little box down here so that’s going to tell this widget to only appear on the test page five page so there are different little bits of code you can use this this is all right now I’m on the other notes page here on the widget logic homepage so there’s like description installation faq etc etc the other notes page is a good one to go to because it gives you an idea of the basics of using um dat conditional tags or PHP tags in which logic so it has some examples here that are very handy easier for example if you were to put in that little budget logic box inside that widget is underscore home with these two round brackets then you’d be telling the red box to only show up on the main blog page and I’ve got a ton of other examples that get more complicated and don’t worry too much about those you’ll probably just be wanting to use it for relatively basic things and another good site for you to refer to is this this is the WordPress codex as it’s called so it’s big list of conditional tags that refer to certain kind of definitions within WordPress and if you kind of combine if you read through this and you’ll kind of get a feel for what this is all about and as you read through the instructions on the widget logic page it should be pretty pretty straightforward I think it will kind of start to gel for you so for our purposes for our example if we want that red box to only appear on page test page five what we’re going to do for is figure out okay so what do I need to put in that widget logic box so here on the WordPress conditional tags page it there’s this area here that talks about a page page it’s kind of confusing because basically in WordPress there are posts and there are pages so that’s why they’re capitalizing that here they’re just trying to drive home the fact that this is visit these are the tags to use if you want to target something that’s an honest-to-goodness page so in this case every or actually across all cases in WordPress every page has its own ID so you never really see this ID it’s kind of it’s a number that kind of runs in the background and it’s just a way that the WordPress database can identify a page as being a different page from another page so if we go for example i’m going to show you under pages here so i’m back inside the wordpress dashboard for the ax kiss from parasite and i want to find out the page ID for test page 5 so how am I going to do that well what I’m going to do is I’m just going to mouse over the title of the page here and I don’t know how well you guys will be able to see this but at the very bottom of my browser there’s a URL appearing it says the kiss from Paris column slash WP dash admin / post PHP ? post equals 1 47 and then it has some other code after that so again this is this is kind of weird because WordPress handles posts and pages in a similar way yet not so don’t be concerned that it’s talking about posts we are in fact looking at the right place for pages but it will just say post and that URL down at the bottom so don’t worry about that but the number is what we’re interested in so I said that it says post equals 147 that’s the number we need to work with when we’re putting together the little bit of code we’re going to put in the widget logic box so we need to just remember that it’s 147 just going to write that down so I don’t forget and then we’re going to go back to the widgets area we’re going to reopen this widget with the red box that we want to affect in some way shape or form and I’m actually now going to go to the wordpress conditionals page and let’s see here this is what I’m going to copy so this is going to allow us to target a specific page so just bear with me for a second so I’m just going to copy this and it says is underscore page and then in brackets says 42 and 42 is just an example page I need that they’re giving here and if I go back to our widgets and I paste that in here but then I changed the 42 to 147 because that’s the page I d-4d page we want the red box to show up on and then I click Save but basically what this is saying is if the page is page ID number 147 display this red box so if i go here and i refresh the page we are actually on test page 5 so if i refresh we should still see it so that’s the first thing we want to test so that’s good it’s appearing and the second part of the test is to make sure it’s not appearing on any other page because that’s what we basically told it to do with the widget logic thing so if i go to the home page you’ll see that it’s not showing up there and it’s not showing um whoops let’s go here test page for to stage 3 it’s not showing on any of these pages it’s only showing on test page 5 now on the other hand one thing you can do is you can reverse the logic that you’re using in widget logic by adding an exclamation mark in front of whatever you put in the widget logic box so if i put an exclamation mark right here at the beginning of this little bit of code what i am saying is show this box on every page except the page that has an IV of 147 so it’s just totally doing a complete 180 so if I save now I should see that it doesn’t appear on test page 5 and that’s exactly what’s happening but it does appear on all the other pages so that’s the basic gist of using widget logic I know it can seem a bit but hopefully you’ll also kind of feel an odd spark of excitement because it is very empowering in terms of getting creating sites for your clients that really have that extra layer of customization because it doesn’t so much seem like a template where everything is the same on every page different pages can have different things now widget logic only works for sidebars but just to give you a little heads-up that if you ever do take it upon yourself to learn this in PHP or not even necessarily learn it but you know if you get comfortable with putting stuff in your custom functions dot PHP file that you might find on the DIY themes forum or on tutorials online then you are going to have the ability to do that kind of thing on other areas of your site so that’s basically what PHP does it’s all about conditionals like if this condition is met for example if we’re on this particular page make this happen and if this condition is not met met then make this other thing happen so that’s kind of the essence of PHP but widget logic makes it easier so you don’t actually have to write out whole sort of conditional statements and rules and things you literally just need to copy and paste these little bits of code and just tweak them according to the IDS that you need and that kind of thing so i will post the links to both these important pages after the webinar for sure ok another question from Katie Katie says I’m amazed at how user-friendly and thorough the thesis theme is now wondering you based your course on the steam however as a VA I am asked to maintain and make changes on other wordpress themes and need help visual preferred can you recommend a good YouTube channel for tutorials on WordPress that I can access anytime um yeah I mean unfortunately I don’t know of a YouTube channel that’s great for that kind of thing the thing with being asked to make changes to sites that aren’t thesis based sites which of course is going to happen I mean sure you can begin now your campaign to sort of educate your clients faces is really a great way to go but the fact is tons of your clients right now we’ll have sites that are based on thesis and of course that’s fine I mean everyone has their reasons for choosing theme that they’ve chosen um but when it comes to being able to make changes to themes I mean there are certain things you can do of course within WordPress itself like updating pages updating stuff that’s in the sidebar and that kind of thing but actually making changes to the structure or design or layout of a theme is going to be very theme specific so you’re basically either going to have to UM see if the theme itself has sort of like support offered for it or maybe they have their own tutorials or I guess it’s possible someone else will developed course surrounding that theme although that’s that’s usually unlikely and mostly only the really big themes that have that kind of thing developed for them um but one thing I did think of for you I don’t know if you’re familiar with this site you to me that’s ude my com if you go to udemy calm and you search for WordPress there’s a ton of WordPress courses available and they’re pretty reasonably priced um so some of them have to do with learning more about wordpress themes and that could be something interesting for you to look into because if you have you can work on cultivating your skills that would be required to kind of hack or change anything but it usually will require that you know some PHP but there are looks like there are some courses in here that address that type of things so could be worth looking at and there are more that are just sort of general general wordpress themes general WordPress courses as well so and some are free some are like a hundred dollars there’s different different prices but worth a look I think okay another question from Katie are you or do you know someone that offers consulting via email phone or skype for WordPress troubleshooting uh yeah I don’t know for that myself but I actually was just working recently with very recently with a great guy I mean there’s Jason why I recommend a lot and keep that’s Jason that design PX calm and this other guy I’ve been working with who’s more for sort of um well actually I mean Jason does all the same things he does but this is just another alternative for you his name is a WP dude so as in WordPress dude so WP dude calm um he’s based in the UK he’s does excellent work he’s very he’s fast he’s you know reasonably priced and he’s got a good system in place for managing all these kinds of little one-off fixes and yeah he’ll help you with like plugin issues anything you can think of really and he’s he’s great so WP dude calm I would suggest you check him out I don’t think he offers phone or Skype necessarily but um he’s good on email I’ve been emailing with him okay now we’ve got a question from Andrea at Andres as hi Amanda one of my biggest pet peeves some custom wordpress sites and themes is cool look vs.Site functionality every so often I come across a wordpress site that’s been customized to create a unique and visually appealing website unfortunately sometimes these sites were customized in a way that makes it impossible to do some of the simplest and most common management and maintenance of the site was the designer says adios for example i’m working with a client who’s web designer customized the genesis theme to them it looks nice and clean yes unfortunately they’ve lost the ability to add a new page like their blog to the top level navbar without the noon a vine and wrapping to the next line and breaking the look of the header and weirding out the navigation links all together I would like your opinion on best practices of wordpress theme customization do’s and don’ts having a list of just because you can doesn’t mean you should customizations to stay away from or to talk to your customers out of would be nice to know um okay so I think I see oh yes sorry then she goes on to say I’m thinking that part of designer best practices should include basic testing of common modifications done by the client like number one verify the client can add on remove items to the menu through the built-in word press menu feature without causing a negative effect remember to verify the client can add and remove a page or post through the built-in WordPress feature without causing and negative effect and number three verify the client can add and remove widgets in the sidebar through the built in WordPress future without causing a negative effect thanks Andrea okay so I think yeah I think you kind of answered your own question which is kind of cool um in a nutshell with thesis none of these things should cause a negative effect like if you create a site for someone and for a client and you hand it over to the client and then the client or somebody else on the client’s team or something um is changing our wants to add pages to the nav bar or making updates like adding new pages and posts or something like that there really shouldn’t be a problem um the only time there should be a problem potentially is if the clients trying to change actual design elements then you’re kind of got you kind of got this trade-off going between having a really super unique look and feel or the ability for the client to be able to change parts of the design worry free but those are only more sort of involved design customizations um things I can think of that you should pass on to a client whenever you create a site in in thesis for the client it’s good to keep in mind about the navbar that if you have a lot of items in the navbar that adding a new one it might push the navbar onto a second line so that’s just one of those things that’s good to be aware of there’s ways to work around it I mean basically you’re just going to tell the client look of course you can add things to the navigation bar just by you know going into the appearance and the menus area in WordPress for example but keep in mind if you add something like a ton of extra stuff or something that’s got a really long name in the tab then it might wrap over to the second line so to avoid that of course you don’t want to tell people they can’t change their menu because it’s very important to have that flexibility there just make the client where I would say that um that that’s the case that that might happen so if you want to add something like that to your navbar you might want to look at slightly restructuring your navbar like maybe adding some changing something to a drop down or decreasing the length of some of the other longer menu items or whatever so it’s kind of just common sense you just but I think it’s a great idea to let the client know I mean basically the navbar is going to fit within the width of the site that you’ve specified and unless you change the width at that site at the same time as you add watched up to the navbar you’re going to have to be a little bit flexible are willing to be a little bit flexible and change maybe a couple of things so that’s what I would say about the navbar um the only other really thing things I can really think of is that I mean when it comes to stuff that you want clients to be able to do on their own site you want them to be able to add things to their side bar probably that’s a nice ability for them to have um that should be fine for the most part two unless the client tries to put something like put a text widget or some other widget between two other widgets that you have in the sidebar and maybe you’ve applied like a negative margin to one of those other two widgets to pull them closer together or something like that and then if the client goes and puts their own widget between your two widgets that were very carefully positioned with that negative margin then you’re going to get kind of funny-looking effect and probably not the desired effect so to guard against that I would say it’s a good idea just depending on the way you’ve designed and set up a site for a client just give the climb that a document like just a little you know word document or something that says okay here are the things to keep in mind that you like don’t want to touch and here’s what to you know maybe consider if you do want to touch this that and the other thing with the design not kind of thing so it’s really just about educating the client so there aren’t any unpleasant surprises and you know keeping in mind that we can’t there’s no way nothing we can do to really ensure that if the clients in their making changes the things that that everything is going to be stay a hundred percent looking the way we intended it to that’s that I mean there’s oh there’s not really much that a client could do to mess up a thesis site when they’re just doing standard tasks like adding new pages adding new posts and a hat class thing so oops hadn’t touched this in a while there goes my aurora aurora borealis screensaver um yeah so I hope that answers your question Andrea um let me know if not or if there’s more information I can give you but anything like that but um I think is just one of those things that helps to be upfront with the client um good idea to get a feel for like this is the question I like to ask my clients so you know are you you have a team who you believe are going to be managing your site in the future or do you expect to be making a lot of changes to the site in the future and that will give you an idea of how careful you have to be about that kind of thing because some clients they don’t even they don’t even care they just want their site and you know they want to be thrilled with their site and then they kind of are very hands-off about it aside from maybe adding a blog post a couple times a week or something but some clients really do fine once you give them this gorgeous sight that they have this funny desire to kind of you know get their hands dirty and get in there and see what’s happening and as the designer I won’t lie can be a bit frustrating because I mean it’s great the clients having fun the clients in there and they probably discovered some new love for WordPress and web design and coding but um it is possible that you know your design may be altered in some way so you never know you might want to make a point of going back to all your client sites every once in a while you see something that looks wonky this is a good relationship building thing with your clients to you can just send an email to the client and say you know I was checking at your site i noticed something’s looking a little bit off like would you mind if I went in to tweak it because that that way it does kind of help you keep um you know your portfolio will people getting a lot better it’ll be a lot more easily controlled by you if you do make those little stop-bys and all the sites because you be amazed at how people can take matters into their own hands and yeah I mean if you’re going to do a really minimalist site for some for someone then it sounds like a really just sort of clean basic site and it’s less of a problem but it can be it can be a slight issue if you have a very creatively designed site and you’ve got a client who’s really into making changes to it so these are just kind of unavoidable things kind of the name of the game but good to be aware of um okay now have a question from Katie again and Katie says I noticed that you add images in the ftp files can we just add images PDFs etc in the media library through the WordPress dashboard that’s how I’ve always done it does it make a difference than they’re not if you don’t do it via FTP um no so it doesn’t make a difference if you prefer to use the media uploader in WordPress and just to give you guys a little as a reminder that’s over here in WordPress on the left side of the screen media so if you need to upload an image or something that you created um it’s very easy you just click this add new you select the file from your computer and it’ll take you through a little um let’s just select a file here okay trying to find the um let’s use this this is a beautiful photo of this hotel in valley that I want to say it so if you upload your file and then it’ll give you the file URL and this is what you need a lot of the time so you know I could copy this file URL and then I can use it in my HTML like if I wanted to add this image into my sidebar or something for example so you would just click Save all changes and now you have the image in your media library and you have the URL that you can grab at any time by coming back in here and clicking the the Edit link so if you’re comfortable doing it that way Katie that’s no problem at all the only well the benefits using FTP is that you can move like upload many files at once like you can highlight a bunch of files and then drag them all over to upload them all and you don’t have to do it one by one and stuff like that and also to the meeting through the windows sorry the WordPress media library you do not have the ability to do things like rename files and folders that are outside of the kind of upload folder that WordPress users to store your images and things so for example you couldn’t have used this method for renaming your custom sample folder to custom which is what you guys had to do at the beginning of the course right but if you don’t mind the the fact that it’s a little slower to do things this way and if you’re more comfortable with it that’s totally fine and I understand I mean ftp does seem very weird and foreign to a lot of people so go for it if that’s doing the trip for you um and okay I think our final question is again from katie and katie says could you please give me a best practices answer for this amanda my client has an old HTML site that she wants to leave up while I build her new visa site the old site is hosted Coast Gator and she wants the new one at godaddy should i transfer the old site to godaddy first hosting and domain when I build the site on the deming URL her site preview DNS com what is the process to transfer the you sites at rehearse the main name and so I risk broken links and such thanks so much Katie okay so um i already posted this on the on the message board I’m just going to state this again I totally understand kta know you have your client some clients they want the web host they want and you know you can’t change their mind but this is a general advisory if any of you are have clients who are considering signing up with GoDaddy or like wanting to switch to GoDaddy or something like that I would try to dissuade them just because godaddy is really not the best of the best when it comes to hosting they cram a lot of sites on to one server and it can result in slow load times and site down and that kind of thing so um but I mean that said if your client really wants godaddy and as you mentioned your client has all her sites hosted with godaddy so I understand the want to keep them all under one roof the first thing you’d want to do is to migrate to the new web house so you’d want to migrate away from Hostgator to go daddy um there is a I’ve never done that myself because I’m always trying to migrate things away from godaddy but I found this article for you i’ll post the link after migrating websites from shared hosting accounts and they kind of walk you through it a little bit it also mentions that um like I know for example greengage this is one of the reasons why i like them so much what they actually do is they will migrate your site for you so you just sign up with greengeeks and you tell them I want you to migrate my site and they’ll just do everything for you which is really great um I looks like GoDaddy will do that if you have a particular type of web hosting account looks like managed hosting or an assisted service plan so what I would recommend you do is actually call up Go Daddy and explain your situation and see what they recommend I mean you might it might be worthwhile to you and your client to UM for just one of these kind of add-ons to get them to help you with that migration just because migrations can get a little bit um tricky or just kind of annoying really so once you have gotten the the domain and the web the site itself transferred over to godaddy then all you have to do is actually follow the instructions in this scenario 9 document that’s on the homepage of the VA classroom course so if you login to view a classroom when you go to the homepage of the training for this course there are links to a bunch of documents that match up to scenario 1 through scenario nine or ten I think it is and scenario 9 is the one you want so basically what you’re going to be doing is you’ll have at this point the old HTML be site will be there on godaddy because you will have migrated it over and what you’re going to do is install WordPress into its own into a new folder on that domain so through godaddy you’ll be able to install WordPress at what I recommend is her domain com / new site and then you build the site all while keeping the original old site online so nobody sees what’s happening I mean you’re you can use the maintenance note mode plug-in to protect against wandering eyes and all that and then when the site is ready to go there are some steps you can follow their outline in that document that will allow you to flip the switch so to speak so that anyone going to the old site any page on the old site will end up on the new thesis based site and there are a few things you’re going to have to consider that are mentioned in the document about redirects and stuff like that because if you just leave the old HTML files floating around the internet those are the files that probably people are going to be landing on by default if they Google something related to your client site there are bound to be links that point from google to those old pages and there are things you can do to ensure that those old pages redirect seamlessly to the new corresponding page on the new site so all that is in the scenario 9 document on the homepage of the design specialist course um yeah and I think that wasn’t for questions the other thing I wanted to mention before we wrap up I guess is that being that we are yeah kind of finished with the course it passed really fast um I wanted to let you guys know that if you’re interested in keeping up to date with different web design tips and tutorials and stuff and I send these out to all my students that I you know run directly through my own site then I would love to have you sign up I set up a special list for you guys and I’ll send those kinds of tips and updates and tutorials out to you as well so you can continue with your with your learning so it’ll be stuff about thesis and it’ll be stuff about you know everything from free cool things you can use in Photoshop to you know tutorials and how to do this not and all that kind of thing so the URL to sign up to that list and I’ll warn you it’s a completely ugly-looking plane page but I set it up very quickly before we started today it’s girls guide to web design com /v a classroom and if you enter your name and email in there then you’ll automatically signed up to get all those student updates that I send out and i’ll post the link to this in the in the message for it as well in case you don’t have a chance to do it now or you’re not listening live on the webinar so its growth i do i’ve design com /v a classroom that’s it awesome awesome well thanks Amanda that was a these qas are informative and I know we’ve been getting some real good feedback from it so so thanks for sharing a lot of really technical wisdom with him with our audience and the other thing I would say for those listening you know you’ve really been in you really had this course has been very much a what’s the word it’s probably been a gift to many of you because the reality is you know and and I looked at a lot of training programs in the design space and nothing really offers what Amanda does in terms of years the ability to create exactly what your clients want not stuff that’s decide of a box or a template where’s you know some kinds that might work for but a lot of clients you’re looking for something that’s special and unique gift and suited to their needs and that’s what this course really I think has helped helped you to learn and and the great thing is that all the training resources and materials the recordings this recording that will be available in the training area in the next day this is all available for you indefinitely so go back go through all the videos go to the tutorials use the social network and post your questions where other other students will be there too you can certainly have some collective intelligence in there to share your ideas and resources and things that come up and even snakes that you come across with with sites that you’re working on so so thanks Amanda this has been a really really terrific course oh my pleasure has been lots of fun it was great to meet everybody and yeah I’m really keeps in touch I always love to see what students create with their newfound knowledge it’s super fun to see yeah and with that being said you may have already said this already or in another video but definitely as you create your site if you some you may have done this already or are doing this definitely post post new sites that you create that you’re saying you know based on what I learned here this is a you could set it to support you know we’ll get it we’ll get it to amend or you can pop it in the social network because we’d love to see the I know you would love to see the free year labor Amanda seeing like wow this is pretty cool results that have come about through what they learned in this program yes I would love to please send your links and all the links you got cool and i would definitely sign up for Amanda’s tips I mean that would just add ongoing value to you especially if you’re going to specializes in this area some of you might be using this just to build your own site but I know a lot of you are probably thinking you know my sites need my clients the graphic design work they need new websites so I’m sure you’re thinking about how you’re going to build this out as a service and so what I’ll do a man also all broadcast that’s the whole list i’ll send an email out when we send our survey out this week and make sure that they have a chance to sign up for your tips and get on your list as well great that’ll be wonderful good well thanks everyone thanks amanda will definitely see you at another call sometime soon hi everybody take care you

digital marketing

As found on YouTube

Share this article

Leave a comment