Make a Website
The course is part of this learning path
This course shows you how you can build a website for your app so that after you upload your app to the app store, you have a marketing website for it. You can use the free web hosting that comes with this course or you can choose to use your own web hosting or domain name as well.
This course is designed for anyone who wants to:
- Learn about iOS development and coding
- Move into a career as an iOS developer
- Master Swift skills
To get the most out of this course, you should have some basic knowledge of iOS.
Hi, within this lecture, we're going to see how we can use WordPress dashboard in order to create a very good website to market our apps. So, here you see the posts. So, this is actually the blog posts. So, as I mentioned before, WordPress started as a blog team but right now you can do much more than blog. You can create websites, you can create even eCommerce sites. But if you click over to add an impulse, you can just insert a media, insert in an image, insert anything you want, like a link or some other like a YouTube video as well, and you can just add a new post to your blog. But we're not interested in blogging right now, rather we're going to use these pages. So, here you actually create a page to display in your website. We're going to see how it works. So, let me show you the other menus.
You can see the appearance over here which we're going to use in and in a little bit soon so that we're going to bring in the appz theme so that we can use in our website. So, we have these widgets, we have these menus, we have this editor to edit the scripts that we import in our page like the theme of the apps. And here we see the plugins and if you go to this add new, you can see there are a lot of plugins that you can use, like you can use a contact plugin in order to let your visitors contact you using your form. I'm not going into these plugins or other menus deeply because we're not actually recording a WordPress course or and web development course, but I'm going to show you how you can work with themes. So, come over here to experience and under themes, you will see a lot of themes and if you click over to 'Add new', you will see a lot of free themes as well. So, WordPress has a lot of free themes.
You can actually search for one. You can just select one and you can come over here and say, install in order to use these existing pages. But rather than that we're going to see how we can manually import a theme and we're going to use this appz.themeshaker. So, if you go to Google and just search for appz themeshaker theme. Appz themeshaker download, it will take you to the download page of this appz theme. So, you can freely download this theme by clicking the 'Download' button over here and it will try to download a zip file in your computer and you're just going to come over here to upload theme and just add this zip file. Altogether, it will just unzip it and process it on its own. You have to just click 'Install Now' button over here. Again you're just uploading the zip, not anything else. If it's not zipped, you can just zip it yourself and then you can say activate over here. It will activate the theme. Now you can actually customize the theme and change everything.
Now if you visit your website, you will see your website is actually a lot better compared to what we had previously. As you can see now, we have this image, we have these headings and buttons and everything. Of course, we're missing some items and we're going to take care of that in a little bit. Now the most important thing that we don't have the slider over here. So, if you come back to your dashboard you will see a slider popping up in the left. So, this is installed with the theme itself. If you come over here to slider and if you click on 'Add new', it will actually let you create a new slider for your theme. So, slider is this section, I'm talking about this section. So, if you go to appz.themeshaker.com, you can see the slider yourself. You can just copy and paste these values just to try if this works or not. So, that's what I'm going to do. I'm just going to copy and paste everything over here so that I can create the exact same slider and I'm going to add a featured image over here.
So, I want the exact same image, so I'm going to download this to my computer and just and then I'm just going to upload it to my WordPress. So, once you do that you can come over here and select files and upload the thing that you have just downloaded, and of course you don't have to do that. You can just watch and see how it's done so that you can actually apply this venue, have your own app uploaded to the App Store. So, now if I come over here and refresh this page, then I will see my slider popping up. So, if you get something like this, if your image is not showing up, then there is a small tweak that you need to do in order to make this work. And in order to do that, we're going to just change a little bit of script in appz theme. So, go over here to editor under appearance and make sure you select the apps theme to edit, not the other ones and then you're just going to have to come over here and find the theme functions.
So, scroll down a little bit until you find this line. So, let me come over here, it's actually at the bottom of this page and we're looking for this post thumbnail. So, this TIMTHUMB. So, if you see this, you will see something like that, we need to remove this and just make sure we are actually left with src. So, if you make this change, now this will show up on your website. If you don't get here, of course you don't need to do that. So, update this file and then you will be ready to display the image in your website. Now, let me just refresh this page and here you go. Now we see the image in our slider and let me go back to my dashboard so that we can go back to our slider and add some more. So, let me say add new and I'm just going to create the second one. And again you don't have to use this appz theme, you can just use anything that you want. You can just search for mobile app themes to use with WordPress in Google or you can just search it internally in the website WordPress as well so that you can install it quickly.
And I'm just going to download everything from here so that I can just show you this works and we can have a nice slider. So, let me go back to my dashboard and I'm just going to upload the second image. So, let me say select files and choose these thumbs altogether. I'm just going to upload every one of them so that we can use any of them whenever we want. So, I'm just going to choose this and let me copy the title and the message here as well. So, let me go back and get the title. Yep, this is a minimalistic approach and here you go. Now, this will be published as well and then if I come over here and refresh this page, then I will see the second slider. Here you go, now this works. Now, let me do the third one and fourth one as well because they will be quick. Since I have the images right now, let me copy the message and say easy to use and let me choose the image from here as well. Since we have uploaded it, we can just come over here and choose this one and say publish. And let me add the fourth one as well so that it will be a complete website.
So, there's a styling options and here you go. Now I have to choose the last one from here and publish it. Now, if I refresh this, I will see my complete slider. You can add as many as you want as you can see because you can slide them afterwards with Appz and it will be automatic, you don't need to do anything after that moment. So, now I have to configure this header over here so that I can have my own title and I can have my own download button. So, come over here to appearance and theme options. Under theme options, you will see the app name. So, rather than apps, I'm going to go for Cat Years one more time and then later on we're going to have to provide a short app description. So, I'm going to say learn how old your cat is and that's it. And in the download link, we can just provide a link to download our app. So, let me just find a sample app from the iTunes. We don't have an app actually uploaded to the App Store at this moment so, I'm just going to go for google maps itunes and I'm just going to get the Google Maps a link and I'm just going to link it over there to download button.
So, now if I paste this over here, it will just link it to my download button and in the copyright, you can just say whatever you want, like Rob Percival or you can just write Cat Years. And in the styling, you can change the background color and every color that you want. And over here, I believe you want to get rid of this watermark so there won't be any advertisements in your website. So, now if I refresh this, then you will see my Cat Years is showing up and if I click over here, it will take me to the iTunes download page. So, now we are left with the main description and the other page stuff over here. So, let me show you how to edit it as well. So, as you can see, they added some good images and good description over here. I'm just going to take this over, but it's actually tricky to get one. So, you have to say view page source in order to reach the source of this website. So, this is the html code and you can just copy and paste whatever you want from here and I'm just doing this for an example. You don't have to do that but if you want to, you can find this article and just copy it.
Not the article part, but the part between the articles. This one and then you can come over here to your website in the posts. Let me just go to this Hello World post and edit it. So, this Hello World displays Welcome to the WordPress right now. So, rather than displaying that, I'm just going to paste the html code in the text tab, not the visual tab. So, let me paste in everything so that I can save this and display exact same things on my website as well. So, if I go to visual tab now, it will be displaying these things. And in fact, I could have copied the visuals as it is without going into the source code and try to paste in here as well but doing that in an html way is much more reliable. Now, now if I can refresh this, then I will see all these things popping up in my web page as well. So, here you go. Now you know how to create a website for your own app.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.