How to build a Premium Theme for WordPress

sunset_row

 

So, if you’re here probably it’s because you really really wanna now how to build a Premium Theme for WordPress. Well, good for you because this is the right place.

In this new series of tutorials we’re gonna go deeply into advanced WordPress functions to create a fully customized WordPress theme, with custom made Widgets and a styled Administration section crafted uniquely for our Theme. You can follow this series even if you’re a beginner, but if you have no idea how WordPress works from a developer point of view, I strongly suggest you to follow my previous series before jumping on this one.

Before starting we have to decide what to do, and because our goal is to create a Premium theme, we need a solid base to start our journey. That’s why I created Sunset, a custom WordPress theme made for blogging, perfect in every pixel and with the proper visual styling for us to use it in our tutorial.

 

 

Of course, like the entire code of the series that will be available on GitHub, also Sunset Theme is completely free and easy to download. If you want to help me grow my online visibility and support the creation of more amazing and free tutorials, please consider:

Follow me on Twitter

Like my Facebook Page

Subscribe to my YouTube Channel

Check the Support Me Page

 

If you don’t care about any of those actions, it’s ok. I’ll quietly cry in a corner while you download the theme 😥

Download Sunset Pack

 

I will keep this Download portal constantly open, and if you already completed some steps no worries, the system will recognize that automatically and you will be able to download the file as many time as you want. Also, in case of updates and implementations to the PSD file, the URL will be updated with the new file, for an easy access.

This blog post will be also constantly updated with video links and new information during the entire length of the entire series, so bookmark this page if you wanna keep an eye on future updates and juicy news.

 

 

That’s pretty much everything for now, so, while you download this PSD like crazy, I will go back into my cave to create new and amazing tutorials.

Happy Coding!

 

  • Tom

    This is a silly question, but I completed 4 of the above things (I don’t have a soundcloud or instagram account) How can I download the theme files associated with this series?

    -Tom

    • Hi Tom, thanks for your comment. The Instagram and Soundcloud shouldn’t be required, but just optional. Are those actions listed as required?
      If so let me know and I will proceed on updating the system.
      Sorry for the issue.

      • Tom

        Thanks for getting back to me. Once I did the 4 those two showed up. They initially were not there though. I’m not seeing anything to download after doing the 4, but maybe I’m just completely missing it?

        • That’s super odd. I set those 2 actions as optionals, not required to download the file.
          Mhhh.. if you want use the contact form on my about page and send me an email. I will send you the link to download it.
          Sorry about that.

          • mat

            Hello Alessandro! I loved your WordPress 101 beginners Tutorial and want to continue with this one. I have the same issue as Tom earlier today, it says I have to complete all 6 steps to download the files.

          • Damn it, I think Glem is buggy. Let me completely remove the last 2 steps. I will let you know when the system is updated!
            I’m really sorry for the issue.

          • Tom

            I contacted you but never heard back is it possible you could email me it – my email is TomJohnsonTech@gmail.com

            Thanks!!

          • Hi Tom, sorry about that, probably your email disappeared under the pile of my daily emails.
            Can you send it again please?
            Also I think I figured and solved the issue with Gleam.
            Cheers

  • Samia S

    After I make a premium wordpress theme, how should I market it so that it get lot of sales on themeforest? Are there other channels for marketing/selling wordpress themes especially for newbie freelancers?

    • Hi, thanks for the comment.

      There are a bunch of different options to sell your theme, and you can check a good list here: https://www.competethemes.com/blog/sell-wordpress-themes-plugins-marketplaces/

      In my opinion, it all depends on you and how you advertise your theme. Of course if you publish it on theme forest and you don’t create any sort of advertising, it will remain unknown and it won’t sell.
      You should write some article about it, find a good website or blog about development and ask the owner to review your theme, make a video tutorial about, do a small Facebook campaign, and so on.
      It’s mostly about sharing and keeping the attention high.

      Good Luck!

  • Sasha Kircanski

    Thank you Alessandro!Your tutorials are great!

  • Sasha Kircanski

    You are doing awesome thing!

  • Becca Clark

    I don’t have Twitter. I did 3 out of 5 things..would really like to continue my tutorials with you!!!! 🙂

    • Hi Becca, thank you for following the series.
      I’m really sorry but the Twitter follow is required, I hope you don’t mind fulfilling this last step.
      If you’re interested in web development Twitter is an amazing source of information, tutorials and other amazing developers way smarter than me. I really suggest you to create an account and start using it.

      Cheers,
      Alex

  • Tweets4Stuff

    Hi, I’ve followed you on twitter and it’s not recognizing the action. Also, you might want to throw in a how to connect to twitter for the 1 click action, because I’m new to twitter and have no idea how to perform this.

    • Hi, sorry for the issue, did you solve it?

      • Jules Verne

        i have same problem, how to connect to twitter ?

        • Do you have a twitter account active and logged in your browser? The widget should prompt you with a popup where it asks to connect with your account.

  • Najib

    Hi, thanks mr Alessandro for the your tutorials are great
    Please send me the download link here : ( ntalikinfo[at]gmail.com )
    i can’t download it

    • Did you follow all the steps?
      What’s the problem your having?

      • Najib

        Thank you again,
        now it works 🙂

  • moinuddin

    I have already posted this question but that is not answered…Once again. In lecture 24 when I use media library of wordpress to upload photos then it is not showing up in the posts or gallery only the featured image is showing up…But if i upload from my computer then it is is showing there in the post if inert and in the gallery as well…Please reply alex..I am stuck i have tried many solutions out there but to no avail.

  • Jozef Sedlak

    Hi Alex, I don’t have Twitter account, how could I proceed with unlocking your tutorial? I am subscriber for a while now.
    I did all the other steps as well…
    Thank you.
    Jozef.

  • Serkan

    Hi Alex. This tutorials are very awesome. Thanks a lot. But i noticed smth about sunset theme. If we don’t add the featured image and all the images in the code editor the get_attachment function doesn’t retrive the image in the code editor. Function return empty value.That is only retrive post featured image . I there any problem in the function or me 🙂

    • Hi, thank you so much for following.
      If you don’t have any image to retrieve is normal that the function returns empty. I will, towards the end of the series, do a round of reviews and improvements to tackle all these issues and remove any possible problem caused by missing content.
      Cheers

  • Ahmet CANGIR

    Hi Alex,
    Do you mind publishing a simple demo of latest work.
    thanks for this awesome work

    • Hi, what do you mean by “latest work”?
      Are you referring to the recent websites I developed?
      Cheers

  • Rahuman Bin Hussain

    Thanks for your tutorials, You are super awesome. I need to know something from you. How to install multi language to a wp site? Any tricks?

  • Adrian Simpson

    Hi Alecadd, I came across your tutorials on building a premium theme on YouTube. I not new to WordPress been using it for a while but I am lacking in coding and I always have the desire to develop my own theme. I have follow your 101 tutorial which is great and now going through your premium which is awesome. I have tried to add LinkedIn to code following the same code has Facebook but I can’t get it to show up. I am not getting any error any suggestion. I can send the code that I have for LinkedIn. Keep doing these awesome tutorials. Thanks.

  • Veneet Singh

    Cant download the file. Already shared on twitter many times and it’s not working!

    • So sorry to hear that, I’ll send you the link via email.
      Thank you so much for following!

      • Veneet Singh

        Thank you! for quick response

      • Marco Kiel

        Same here, please send me the link..

    • KerSs

      Same Problem for me! i cant downoad

  • This is nonsensical, because I have completed the “tweet on twitter” section and during verification it says ” Sorry, we’re have trouble communicating with twitter” blsh blah blah… having the same problem as Veneet Singh.

    • Stewart Lynch

      Link to twitter and all will be well

  • Kenya Sullivan

    Gleam doesnt seem to be working. I’ve completed all the steps, doesn’t except twitter. Ive linked and tweeted.

    • Kenya Sullivan

      disregard just took some time.

      • Hi, apologies for the issue with Gleam, I’m glad it worked after a bit.
        Sometimes the Twitter API are a bit finicky, and this issue can occur.

        Welcome to the community, and Happy Coding!

  • Dave Wood

    Love the videos and am currently working on tutorial 44. You have explained things perfectly. I have picked up WordPress about 3 months ago and am able to learn at an accelerated rate because of your efforts. One quick question is about Bootstrap and WordPress I noticed that the mobility breaks at about 921-922 and presents a horizontal scroll. I have had issues similar with Bootstrap (with hero images) what is the work around? If you have answered this before I apologize.

  • surja

    Thank you for the tutorials and the download, awesome series.

  • Winston George

    I completed 4 steps yet i dont see the files needed to download.

  • Winston George

    Can you please send the link to the Sunset Theme to my email address. calvingeorge1961@gmail.com.

  • Winston George

    I finally was able to download the necessary files. i look forward to building a premium wordpress theme. Thank you so much for sharing. If anyone is still having trouble with seeing the download gift. once you complete the 1st five requirements it will pop up. If you have trouble with the tweet. just select Authorize tweet and that should resolve it.

  • Adnan Nazir

    hi Allesandro . Same Issue trying to get tweet on twitter and it gets stuck and can not move forward.
    although love you series making me feel a genius.

  • Sanjida Hassain

    https://uploads.disquscdn.com/images/50bd9765b85a10b87dd1c6af4a677a1cf018ebfeea33de9905db6ddd4d65a719.jpg

    Can’t download the PSD file. Already tweet on twitter many times but it’s not working!

  • Sami Mansour

    Also same problem, i can’t download the theme

    • I sent you an email with the link,
      cheers

      • Sami Mansour

        Many Thanks Alessandro 🙂

      • Alexandre AFF

        Hi, I have the same problem mentioned above.
        I connected the account and solved the problem. thank you for the tutorial.

  • Hassan

    Hi Alessandro!

    Thanks for your amazing tutorials. I am following you on you tube but I cannot download the files. Please email it to me @ hassanhafez86@gmail.com

    I look forward to hearing from you.

    Regards

    Hassan

  • Kevin Brew

    Loved the 101 videos. My tweet isn’t registering though.

  • Mohammed Ansari

    Hi @Alecaddd:disqus , I followed you, I subscribed you, checked your links, tweeted..but still the files down get downloaded.

    Please email me the files to smartansari@hotmail.com

  • Mohammed Ansari

    Here is the error

  • Benojir Ahmed

    hi, thank you for your nice tutorials. I am learning a lot from you. I have a simple question. Which one is better, to use bootstrap or plain CSS for styling? If i use plain CSS, will the wordpress theme be responsive for all devices?

  • Alexandre AFF

    Hi, I have completed all steps but it doesn’t seem to recognize my tweet. What can I do? My handle is @Alexandre__Boi

  • Michael Spade

    I keep getting stuck on twitter. It will not go forward : (

  • bad boy

    problem in downloading the theme psd…help required

    • Sorry about that, please send me a private message on my Facebook page and I’ll send you the link

  • Derek Smith

    I’ve also done all the necessary things, but the twitter actions just won’t register – you even liked my tweet, so I know the problem isn’t my end – pity, was looking forward to this …

    • Sorry to hear that, sometime the Twitter API are weird and Gleam can’t detect the tweet. Please send me a private message to my facebook page and I’ll send you the link!

  • Nice tutorials, I tried to download the theme but I wasnt able to. Please share the download link with me at jambahopiyo@yahoo.com

  • Siphamandla

    well I managed to get to the drop box after doing all the steps but the zip folder in the drop box is not theme.zip as in the first video, but SunsetPack.zip, Sunset only has the two folders and does not have the static index.html documents and all its accompanying files.

    • Did you actually watch the video introduction where I explained what you’ll find in the zip file, or you just assumed to find the entire theme in it?
      The ZIp file contains the PSD and assets to start, but all the coding will be done file by file following the tutorials.
      If you need the source files you can find the in the Github repo, link in the description of every video.
      I understand your passion and willing to start as soon as possible, and I thank you for that, but please, restrain yourself from commenting on every platform, receiving 3 messages in a row with the same questions in 3 different locations is a bit annoying.
      Happy Coding!

      • SIPHAMANDLA MEHLOMAKULU

        Thank you Alessandro.

  • SIPHAMANDLA MEHLOMAKULU

    Sir I apologize for asking for help in three different places, I thought it might increase my chances of you seeing my issue. I can not find my comment and your reply on this site, I would really appreciate your help thank you in advance.

  • Vishal Mittal

    You are simply awesome. One query, Just saw your PSD file for sunset theme, as I can see you have developed every section using posts. Is there any other way to do that.!

    • Hi, thank you so much for your comment.
      I’m not sure I got your question. Do you want to know if you can develop different sections in pages or custom templates?

      • Vishal Mittal

        Thanks for your reply. Like you have created video post title, audio post title. I assumed you created them using posts. Creating posts is not always feasible so is there any other way out.

        • If you watch the entire series you will see that I created content-type templates to be used based on post formats. You can use the same method and return a different type of template based on any other data you want, like categories, tags, custom fields, etc. for any other section.
          Watch the series and you will learn everything you need

  • Стефан Дјокић Дјок

    Hi Alessandro! First of all, your tutorials rock! They have helped me a lot. Can u spare a little bit of your time and help me with my issue. I created nav menu, everything works fine (white bar have smooth transition on hover), when i click on dropdown, white bar dissapears (this is fine), but when i click again and dropdown menu dissapears, white bar again have smooth transition but it stays there (even when i hover on other cathegories in my menu). How can i make it same as before I clicked on dropdown?

    • Hi, thank you so much for watching my videos.
      I think your issue is due to the :focus attribute on those links. When you click on an element, you assign a focus attribute to it, and it stays there until you click outside or select another element.
      Try to remove the focus attribute from the CSS.

      • Стефан Дјокић Дјок

        It’s aliveeeeeeeeeeee 🙂 It works, thank you so much!

  • Стефан Дјокић Дјок

    I really hope that you will find time to respond like last time, again I have a problem 🙁
    For my featured image in my blog post, i don’t want background-cover (I want original image to fill the container), and I want image to maintain original size for every size of screen (to be responsive). What CSS rule should I use? I know that it sounds like a noob question, but I’ve tried like 50 combinations and neither one work. Only time that image fills container is with cover paramether, but I don’t want that, also tried width, max width 100% it doesn’t work . I will upload photo what it looks like when I change from cover. Tnx in advance!!!.
    https://uploads.disquscdn.com/images/fdaf834a403b0b3f7bc587355a3aed0e75be70dab720491c49bb565121e34fdd.png https://uploads.disquscdn.com/images/3a06c325166128d6a7415a6d737a96c12c180efb927ce0f02fe2de2f9e22023f.png

    • The only solution I know is to use the background-size: contain;
      It’s not the optimal solution because you don’t have control on which parts are cut out of the container, but at least you won’t have any empty spaces, and the image will readapt automatically when the user resizes the browser.
      These are all the available options on the CSS property.
      https://www.w3schools.com/csSref/css3_pr_background-size.asp

  • Marko

    I have 2 questions about comments part of your tutorial.
    My time and date of posted comment appears as a clickable link (it goes nowhere), how i can remove it?
    In your comments part 3 you leave sunset_post_navigation() with just require template, but when i checked source code of your last video, u have changed function completely, it has no require template, and when i copy it, change the chevron icons to my class, it doesn’t work. I have no links of previous or next comments, no chevrons, nothing. Do i need to require template of my comment-nav somewhere? How can i fix this?
    Your tutorials are great, keep it going! all the best

    • Hi, thanks for following my tutorials.
      Did you check my source code to see what are the differences with yours?

  • Marko

    Dear god I mixed up functions completely, my bad, sorry 🙂
    Forget the second question.