Aino 2.0 Theme Update Guide

Aino Full Site Editing WordPress Theme Update Guide

After a few weeks of building and tweaking, we are happy to announce our Aino 2.0 block theme update to you. After WordPress 5.8 was released with the first Full Site Editing features last month, we felt it was time to take up the challenge and get our Aino theme ready for the future of WordPress.

What is a block theme?

You might ask, what is she talking about, what is a block theme and how is this different from the current Aino theme? The Aino 2.0 update comes with a block-based header and footer this is the biggest change to the theme from the user experience. We also updated all other files under the hood, but I will talk about this in an extra post shortly.

It’s a big update with lots of changes and the new block header and footer. So I wanted to give you a heads up and a little guide on how to prepare for the update before you hit the update button in your dashboard.

First, you will need to install the free Gutenberg plugin before updating. The plugin is needed in order to use the Site Editor beta version. The Site Editor gives you the opportunity to make changes to your page templates and header and footer directly in the editor. It also gives you the opportunity to use the first version of the Global Styles.

Global Styles introduction

With Global Styles, you can choose your font family (we will add further font options shortly) and personalise the theme’s colour palette on a global or block-based level. You can access the Global Styles settings by clicking on Site Editor in the admin menu. Now you see the Aa button on the top right side of your editor menu. You can choose between changes on the ‘root’ level or ‘by Block Type’ level.

So you can either decide to make changes for all elements on your website at once (root level) or only change the settings of one particular block. We are working on an update for our colour palette, so you will have finer customisation options for colours on the block level.

Changing styles ‘per Block Type’ is a great way to choose your heading’s font-weight and decide if you want bold (which is the themes default setting) or regular headings. A lot of the new Global Styles settings replace the theme settings previously provided via the Customiser.

Yes, the Customiser gets retired

You heard right, the Customiser will be retired in the Full Site Editing WordPress world. All Customiser settings will be replaced with options within the Full Site editing features. With Aino 2.0 you can still deactivate the Site Editor (via Gutenberg/Experiments) and see the Customiser menu again, but you actually won’t need it any longer. All Aino theme settings can now be managed via Global styles or by editing the Page Templates or Templates Parts directly.

You can use a plugin like Simple Custom CSS in case you need any custom CSS. If you want to copy you custom CSS and you need access to the Customiser go to Gutenberg/Experiments in your WordPress menu and shortly disable the Site Editor in oder to gain access to the Customiser again. After you copied your CSS, you can activate the Site Editor again.

To add favicons for your website we recommend using a plugin like Favicon by RealFaviconGenerator. If gives you more advanced favicon settings compared to the Customiser option.

Your site logo will now be added your header using the new Site Logo block.

New block-based Header

Being able to customise the header via blocks is a huge improvement to WordPress and I love this new feature. At the moment you can choose from a standard light and dark header. After the Aino 2.0 update you will need to set up your header again, but you will also get a lot of new options to customise your header. You can also save multiple different Header templates. This way you can apply headers in multiple colours as we did here on the Aino website.

To set up your default header, you need to click on Site Editor in your WordPress menu. You get directed to the default blog page of your website, the index page. Here you can see the default block Header and Footer.

You can choose between the Header and Footer options by clicking on ‘Replace’ in the editor toolbar. We prepared the main Header navigation so that you can choose one of your previously set up menus. Alternatively you You can choose between the Header and Footer options by clicking on ‘Replace’ in the editor toolbar. We prepared the main Header navigation so that you can still apply your previously set up menus in the new Navigation block. Alternatively, you can create a new menu by adding ‘Page Link’ blocks via the editor.

You can find more infos in detailed tutorial on how to customize your block-based Header via the Site editor.

Block-based Footer

As with the Header, you will also need to set up your new block-based Footer in Aino 2.0. But again you have a lot more options to customise the Footer and we will add multiple cool new Footer designs to choose from over the next few days. For now, you can choose between a light or dark Footer. It’s now easier to customise your Footer content since you see your Footer in the editor.

Block Page Templates

Blocks themes come with multiple page templates. You can also save custom ones. This makes creating pages in WordPress so much more flexible. We were able to retire most of the old page templates since you can now build pages with the ‘Header and Footer’ Page template and apply wide and fullscreen blocks to your content. You might need to update your existing pages and choose a new Page Template from the Page Settings sidebar under Template.

Since page templates and page template editing is a complex and new WordPress feature, I will provide more a detailed tutorial on the blog in the next days.

Aino’s new Pattern library

And finally we worked on our new Foundation Pattern library to provide you with a set of flexible predesigned layouts you can use to build your pages.

Aino WordPress Block Patterns Libary

The patterns are fully responsive and can be dragged and dropped onto any page (using the ‘Header and Footer’) Page template. Now you only need to change the content to your own by writing your texts and replacing the images with your own. It is possible to add to the patterns or delete elements you don’t need. We will update the pattern library regularly. It will be a growing library of design templates.

Questions and feedback

I know there are a lot of changes to be made for existing Aino theme users. We decided to switch Aino to a full block theme rather sooner than later. It’s the start of a new era for WordPress themes and we want to provide you with the latest WordPress themes have to offer. We hope you love the new changes and possibilities this update brings to themes. Since there will be a learning curve to get familiar with the new Site Editor, Page template and pattern options. We will provide plenty of tutorials going forward.

If you have any questions, feedback or bug reports, please let us know either in the comments or directly on GitHub. We love to hear from you.

,

37 responses to “Aino 2.0 Theme Update Guide”

  1. Hi Ellen,
    will we get this guide in german, too? 😉

    • Ellen Bauer says:

      Yes!!! I’m working on the German website version, I plan to get it ready to go by this week. I will see that I translate the starter guide into German for everyone asap.

  2. christian says:

    Just WOW!
    Thank you, Ellen. Ich beisse mir die Zähne aus mit FSE. (“grit my teeth”).
    Aino theme and especially the guides and posts are IMMENSELY helpful. Thank you so much.
    I started to build my own basic theme but already get problems when the theme.json configuration concerning typography isn’t working as expected and similar “minor” problems….
    So, I can see there is a lot of work gone into Aino. I really love the philosophy of going full-in with FSE as soon as possible. Other themes often don’t do this and offer their own solutions for header and footer builder etc. This obviously makes senses economically as Gutenberg and full site editing are changing (and improving) fast, which means you also need to update, fix change the theme very regularly to stay up to date. This means a lot of work. Thank you for doing it.

  3. Patrick says:

    I’ve been working with your templates for almost eight years. Now I’ve made my first attempts with Aino 2.0 – it looks very good. One question: where do the great pictures / graphics come from,
    do it yourself or buy it (download)?

  4. mario.kretschmer says:

    I used to have a fancy website…. Unfortunately, mea culpa, I had forgotten, of all things, that automatic updates are activated for the themes in the online version. Now I have a website where all areas have a white background, which were previously dark with one click In Customizer and so far no idea how to change it again.
    The menus are also no longer correct. I haven’t dealt with widgets yet, because I have to fix the design in the next few days.
    If I understand all this correctly so far, it may be a nice idea to replace the Customizer, however, for the customizations I want, I already count at least 3 additional plugins needed for this. For a different font I still need the Google Fonts plugin, for custom css and for a favicon I also need an extra plugin, all of which was not necessary with the Customizer.
    Please do not misunderstand – I find your work still great, but that I now have to tinker again at least 3 days, so that it looks again approximately as before makes Aino 2.0 for me first so semi-usable.

    • Ellen Bauer says:

      Hi Mario,
      I know it’s a big change, but in the long-run I feel it’s important to make this change now rather than later. I also upgraded our Aino website from to Aino 2.0 and at first it looked like a lot of work, but it was done faster than I thought.

      Regarding extra plugins, they will become unnecessary within the next WordPress and Gutenberg plugin updates and I will document the changes as soon as they are available.

      We will also add further Google font options for Aino in the next updates.

      For the main background color of the website you can change the following theme colour variable like so:

      :root {
        --wp--custom--color--main-background: red;
      }

      In general we believe it is the best approach to switch to a full block theme rather sooner as later. It will be a big change for themes over the next months and we want to give our theme users a chance to get ready for those changes gradually. This is the reason we build Aino, so this is way we decided to take the leap now.

      We also want to offer all the great features Full Site Editing brings now since it is stable enough for themes like Aino to work with them. I hope you will like our decision in the long run and enjoy the advantages a full block theme brings to users. It is so much easier to build pages, customise the Footer and Header, use multiple Footer and Headers. I believe there are way more advantages and it’s worth the extra effort to make the switch now.

      If you have questions or run into issues, please let me know. I’m here to help!

  5. Ellen Bauer says:

    Hi Christian,

    thank you so so much for your encouraging words. This means so much to us!!!

    You are so right, from our experience over the last years building for WordPress it was always the best decision to stick close to the core and build minimal solutions instead of inventing fast custom ones. We believe in this approach and that’s why we decide to build Aino in a way to start working with the new tools and features and still work with the core WordPress solutions only. In the long run it just feels like best and safest approach we can offer to our theme users.

    We hope users will like our early approach with Aino. We will still support our classic themes as long as possible. But we want to build for the future of WordPress and Aino is our way of doing this today 🙂

  6. Ellen Bauer says:

    Hi Patrick,

    amazing, thank you so very much for your loyalty, this is so wonderful to hear 🙂 If you have any questions regarding Aino, please just ask anytime.

    Manuel is creating all the images, we get inspired by images from the Bauhaus area, there are tons of inspirations e.g. on Pinterest.

  7. mario.kretschmer says:

    Hi Ellen.
    “Reply” isn’t working here yet? 😉
    As I’ve already tried to indicate, I’m still totally into AINO. I also knew that the big change would come at some point. So it’s all good, and it’s not like I don’t like challenges from time to time.
    And as you said, it looked “worse” than it is at the beginning. Just get started and the longer you do it, the easier it actually gets.
    I’m also a good bit further along in the meantime, though the “Recent Posts” block is still missing the ability to style the title. And it does not work with AINO 2.0.3 unfortunately more in the file wp-includes/blocks/latest-posts the code to adapt.
    Also, I would dream of a (German) tutorial on how to create a page footer with the grid layout. (If your time allows it.) Unfortunately, I do not understand the positioning within a grid so far.
    As I said, I think AINO is great, right and important and of course I will stay with it. 👍
    Greetings, Mario.

    • Ellen Bauer says:

      Hi Mario,

      I’m so happy that you managed to get started with Aino 2.0, I’m so sorry for the hurdles. To do this switch was the biggest one though from now on things will run more smoothly as we build Aino up as a block theme step by step.

      Regarding the tutorial, a big YES, I’m working on on it and new tutorials in English and German will be released this week (2. week of Aug). I will check the Recent posts, I know I still need to work on this one. Also the threaded comments, this is still a bug in Gutenberg and I ask them for an update.

      Thanks so much for your big support all along.

      Kind Regards,
      Ellen

  8. cyrill kuhlmann says:

    Hi Ellen,

    I am using the Aino Theme and really like it – I was super amazed by the latest update – hit the update button – and had to rearrange some things. 🙂 …Now – after doing so – I am very happy with it…
    So I have a question related to the QUERY LOOP Block… I used to have the “Related Posts” that worked like a rabbit hole for posts in the same category. Now – with the QUERY LOOP Block it does not work anymore – it always shows the same Posts – either I change the categories, or from A -> Z … what so ever … there are always the same Posts shown…

    Is this because it is still in development or am I missing something?

    All the best – thank you so much!

    Cyrill

    • Ellen Bauer says:

      Hi Cyrill,

      thank you so much for your kind feedback, so happy to hear that you like Aino. Also I’m so sorry for the ‘rough’ update to 2.0. I wish it could have been done a bit smoother, but as explained above in the post, I believe it is best to switch as soon as possible. From now on it will be a lot easier.

      I will work on the Related posts section and provide a tutorial for this. It is a first version for sure, maybe as a first workaround you could prepare a tag of e.g. ‘explore’ and add a few of your best posts to it. I will try to add an option to rotate those posts, since unfortunately the Query loop block does not come with a solution for related posts or a rotation option.

      I will write a blog posts here as soon as I have an improved solution.

      Kind Regards,
      Ellen

  9. Hasan says:

    OMG! WOW!
    Hello! Thank you so much for this updates… I can’t wait to see Blog patterns 😍🙌

  10. Hallo Ellen,
    Ich war im Urlaub. Die Updates liefen automatisch. Die Webseite ist nicht mehr erreichbar. Ich würde mir einen schnellen Workaround wünschen, damit ich AINO wieder als Theme nutzen kann. Ich habe auf das Standardtheme umstellen müssen, damit wenigstens die Seite erreichbar bleibt.
    Vielen Dank.
    Michael

  11. Inzwischen scheint das zu funktionieren. Ich habe Gutenberg deaktiviert, auf das Standardthe umgeschaltet. Dann Gutenberg aktiviert und Aino aktiviert. Das funktioniert, aber überall sind plötzlich Menu Items im Footer. Sachen die ich nie dort platziert habe.

    • Ellen Bauer says:

      Hallo Michael,

      bitte entschuldige diesen holprigen Start vielmals, das tut mir leid. Leider habe ich über WordPress.org keine Möglichkeit eine Vorwarnung oder Hinweislink zu integrieren. Ab jetzt wird es aber keine so gravierenden Updates mehr geben, wir haben das gröbste geschafft mit dem Umzug sum Block-Theme.

      Die Menülink sind nur Beispiele, du kannst sie löschen oder andere Inhalte in die Menüspalten integrieren. Wir arbeiten im Moment auch an weiteren Footer-Designs, so das man sich einen passenden Footer aussuchen kann.

      Momentan kannst du den Footer anpassen, wenn du auf ‘Site Editor’ klickst. Es ist möglich das ganze Element mit den Links zu löschen. Ich schreibe gerade noch an einer Anleitung zum Footer und Header. Sag Bescheid, wenn du noch Fragen hast.

      Viele Grüße, Ellen

  12. mario.kretschmer says:

    After a little trial and study, my site now runs to my complete satisfaction on the current AINO theme. I eagerly await the things that will come in the future. Top! 👍😊🙌

  13. Sehr cool : ))!!! Ist toll geworden! Kurze Frage: Ist denn noch ein Child Theme zu empfehlen?

    • Ellen Bauer says:

      Hallo Shau Chung Shin,

      1000 Dank, das freut uns sehr zu hören. Ja, auf jeden Fall kann ein Child-Theme genutzt werden, wenn du große Anpassungen vor allem an der functions.php vornehmen möchtest. Ansonsten wird ein Child-Theme für Nutzer weniger wichtig, da viel mehr in den Dateien selbst angepasst werden kann. Du kannst z.B. die Seiten-Templates anpassen und deine Anpassungen speichern und sogar eigene Templates anlegen. Ich schreibe dazu diese Woche noch einen Blogbeitrag.

      Für CSS-Anpassungen kannst du ein Plugin installieren, z.B. Simple Custom CSS and JS. Sag Bescheid, wenn du noch Fragen hast.

      Viele Grüße,
      Ellen

  14. agathe says:

    Hallo Ellen, ich war bislang begeistert von diesem Theme, für die neue Version werde ich allerdings noch etwas Zeit brauchen, daher habe ich tatsächlich einmal auf das letzte Backup zurückgegriffen. Ich bin aber schon sehr gespannt und freue mich, mit dem Update zu arbeiten! Eine grundsätzliche Frage: ist das Theme kostenlos? Darf ich Kundenprojekte damit machen (wieviele?), ist eine Pro-Version geplant? Viele Grüße, Agathe

  15. Cyrill Kuhlmann says:

    Hi Ellen,

    vielen Dank für deine Antwort – ich schreibe jetzt mal auf deutsch ;-).
    Ah, ich verstehe – ja ich dachte, der Query Loop Block sei das selbe wie “Related Posts” – mega, ja da freue ich mich drauf.
    Vielen Dank für eure Arbeit – Aino ist richtig cool!

    Liebe Grüße, Cyrill

  16. Kristof says:

    Hi, I would love to see a Aino themed sites showcase. Are there any sites in particular you would recommend to visit, to get a glimpse of Aino in action?

  17. Xanoris says:

    Ach deutsch geht ja auch, ich vergaß… 😁
    Also: man kann das Seitenlogo und das Favicon auch (noch) ohne zusätzliches Plugin hierfür ändern, wenn man das Fonts Plugin benutzt. Wenn man darüber die Schriftart ändert, kommt man auch noch in den Customizer, wo man dann einmal auf den kleinen zurück-Pfeil klicken kann. Und dann kann man wie gewohnt unter Website-Informationen die Grafiken für Logo und Icon einfügen. 😉

  18. Cyrill Kuhlmann says:

    Hi Ellen, ist es möglich ohne extra CSS den Header sticky zu machen?
    Das könnte ich mir auch sehr gut vorstellen als Option!

    Liebe Grüße

    Cyrill

  19. Marion says:

    Hallo Ellen,

    ich habe die Updates in meinen Sites jetzt aus Backups rückgängig gemacht. Den Zeitaufwand, die notwendigen Änderungen einzupflegen, kann ich nicht einfach mal so ungeplant aufbringen. Ich wäre sehr froh gewesen, wenn diese gravierenden Umstellungen in einem neuen, Nachfolge-Theme umgesetzt worden wären oder zumindest in irgendeiner Form eine Warnung, dass das Update erhebliche Wartungsarbeiten nach sich zieht.

  20. cobarbosa says:

    Hi, Ellen! Thanks for the cool new design. I haven’t however been able to find any of the foundation pattern layouts. I have seen block elements, but no real templates as it shows on the Aino website. Is there anything I am doing wrong? The only templates I see are for the header. Thank you!
    Clarice

    • Ellen Bauer says:

      Hi Clarice,

      thank you sooo much for your feedback, so happy that you like our Aino design. Do you have the latest Aino theme version 2+ installed and activate? Then you should be able to find the patterns once you click on the Plus-Button (the Block Inserter) on the left top corner of the block editor. The sidebar opens up and you see a tab menu of Blocks/Patterns/Reusable at the top.

      Please let me know if you can’t find the Patterns there.

      Best Regards,
      Ellen

  21. victorkane says:

    Hi there,
    Am about to start trying Aino 2.0 since I’m very much in agreement with thinking directly in terms of future proof full site editing. Should I make a child theme first? How would I do that? What are your recommendations for making my own templates and template parts as code based as possible. Also, should I feel free to edit theme.json? Thanks for your great work!

  22. Łukasz says:

    Hello, I found an interesting page which could help others to create ‘default’ featured image: https://tabbied.com/ If you have other similar pages, please write it in the comments!

  23. Charles says:

    Hello,
    I just installed the 2.0 update and the menu links that were in my header are now centered; whereas before they were at the top right of the page.
    Is there any way to fix this please ?

    • Ellen Bauer says:

      Hi Charles,

      we will add further Header patterns with a variety of design options soon. At the moment you can customize the default Header in the Site Editor (Beta). If you delete the Icons block in the Header the Navigation block will automatically align to the right.

      Please let me know if this not working and you need further help.

  24. Charles says:

    Hi Ellen,

    Thank you for your quick answer.
    I deleted the three social icons but the navigation links are still centered :/

    Yours,

    • Ellen Bauer says:

      Hi Charles,

      oh, I’m so sorry, I will definitely work on improving the alignment settings for the Header blocks and offer more options.

      As a first workaround/quick fix you could add the following custom CSS via a Custom CSS plugin:

      .site-header__content .wp-block-navigation.is-responsive {
          justify-content: flex-end !important;
      }

      Thanks so much for your patience,
      Ellen

  25. Clarice says:

    Ellen, I did have it all up to date. I went in right now and was able to find it, thankfully! I will holla if anything. Thanks a ton again! Can’t sign in onto the wpaino website though.

    Clarice

    • Ellen Bauer says:

      Hi Clarice,

      awesome, yes, please let me know if you have any questions or experience issues. And thanks for letting me know about the login. This is fixed again now.

      Thanks so much,
      Ellen

Leave a Reply

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