Everything You Need to Know About Outsourcing WordPress Development

WordPress now powers more than a third of the world wide web (36,5% as of May 21, 2020). This includes blogging, businesses, online stores and service websites in a wide variety of niches and sectors. And there is a huge line-up of businesses that evolved around the dominant CMS that builds and maintains WordPress websites: WordPress themes, hostings, managed services and, of course, maintenance and outsourcing businesses that help in developing and maintaining WordPress websites on your behalf. 

Due to its piecemeal structure, WordPress is not as easy of a website building solution as its competitors such as Wix, Squarespace, etc… In recent years, this has led more individuals and businesses to consider using third-party services to complete the technical side of WordPress for them. In this article, we’ll take a look at the ins and outs of outsourcing WordPress development. We’ll answer the most common questions about outsourcing work in WordPress, whether or not you should do it, as well as tips on how to go about it the right way.

Why choose outsourcing WordPress development?

There’s no doubt that WordPress is easy to use, but it’s not very easy to set up and maintain. Unlike a SaaS solution, you have to put together different sections of the CMS together like lego pieces in order to get it working. This, on one hand, makes WordPress formable and extendible, which gives it a huge advantage over its competitors. On the other hand, this also makes it difficult to create and maintain. There are many solutions and options for each of these lego pieces you must choose from: themes, page builders, plugins, hostings, caching service and more.

You should either develop knowledge, experience and skillset to work with each of these yourself or break the bank to recruit and hire an in-house developer(s) to do it. But there’s a third option: outsourcing WordPress development to a ghost middle-man who specializes in WordPress. And even in a specific theme or plugin such as Jupiter X or Elementor. But in what ways is this beneficial to you?

Leverage expertise without having it

A WordPress specialist has developed years of experience and skills about the ins and outs of WordPress that your in-house developer might not know right off the bat. Even if you want to tackle the learning curve, there is a period of trial and error that you can skip by simply jumping on the back of a veteran WordPress specialist. 

While the process of creating and operating in WordPress themes and page builders is standard, clear and documented, there are dozens of ways to do one single thing. And the result can vary widely based on which way you chose to do it. Specialists have learnt the best way to do different things after years of working with that theme or plugin.

Eliminate legwork and focus on creativity

Digital media production has a serious drawback in general: legwork. And it’s even worse with creation within WordPress. Some WordPress tasks involve more legwork than creativity. You spend tons of time converting your PSD to WordPress, playing with Elementor to create  a page template or moving your content from an existing source to your new website.

There can be times when you spend more time building a template in Elementor than it took you to design it in Photoshop or Sketch!

The most important benefit of outsourcing is that it can free up your time to focus on what matters and what can only be done by you. Being a leader, designer, thinker, strategist, an ideator are things that cannot be outsourced. So you might save some time and focus on your creativity rather than installing WordPress.

Increase productivity and velocity

Development and QA is where the bottleneck happens in most teams. Especially if it involves new and unexplored areas where some research and trial and errors are involved. And it’s at that point where you can get a hand from an expert to get you out of a jam, smoothen your workflow and increase productivity by focusing on the other parts of the workflow like strategizing, customer development and marketing.

Having a smooth development workflow will give you confidence to work on more projects simultaneously. This is particularly important for high-volume teams where velocity is limited to the number of the few developers working in-house and you cannot assign them multiple tasks from different projects freely. By outsourcing to the right team, you’re actually doubling or tripling your team size without actually increasing your workforce.

Cut costs and increase profit margins

High-volume WordPress businesses such as agencies might reduce production costs by outsourcing WordPress labour instead of spending money to recruit, hire and employ staff.

What are white-label services?

White-label services ensure that your brand – and only your brand – will appear on the final product, even if you had a freelancer or agency doing the work on your behalf. Make sure to hash out the terms for branding and disclosure in the contract.

outsourcing WordPress development

This is good for your brand and will protect your clientele. However, this also increases your and your contractor’s responsibility to assure the quality of the work. If there are any problems, the responsibility will lie on your shoulders (not your contractors), and your brand may be at stake.

White-label + partnership: The ideal formula!

White-label services are suitable for high-volume WordPress businesses and the regular flow of projects you want to outsource to someone reliable. It would be ideal if you can form a long-term relationship with your contractor and strike an agreement that would work in the interests of all parties involved. For example, a special rate exclusive to you when you promise to outsource a specific number of projects every month.

A long-term relationship fosters trust and reliability and transforms your contractor into a partner.  There are some white-label agencies where you can have your own permanent team of experts who work on your projects, you get to know each other over time and perfectly improve the productivity as a result of long-term collaboration.

Who should outsource? Freelancers, agencies or end-users?

The short answer is everyone! Freelancers, agencies and end-users alike would benefit from getting help from a WordPress expert. It might be an end user who just bought a WordPress theme and needs help customizing it, a freelancer who needs a hand doing a job for their client or an agency with a large clientele who needs another team to lift off part of the workload.

What can be outsourced?

Custom WordPress development

You might want to consider outsourcing if you need advanced WordPress development for particular requirements on your website or you need WordPress plugins developed from scratch for your project. You require a lot of knowledge and skills with WordPress to get something like this yourself or by your developer.

  • ✅ I want a custom calculator plugin …
  • ✅ I want a few custom post types for my hotel website …
  • ✅ I want a custom booking plugin built for my WordPress website
  • ✅ I want a custom header design to look and feel like on example.com
  • ✅ I want my popup to be showing a dynamic carousel populated by a post type in the WordPress backend.
  • ✅ I need my portfolio to have some custom fields with specific relations
  • ✅ I need a custom language selector for my multilingual website
  • ✅ I need to integrate an LMS with WooCommerce
  • ✅ I need to customize my Membership plugin
  • ✅ I need a custom shortcode to show a content under specific conditions to a group of my users

Theme customization

This is one of the most popular outsourced services on the WordPress market: You bought a WordPress theme, and you want to customize it by adding a custom functionality, capability or some custom codes to add a specific visual function that is not possible with built-in features.

  • ✅ I want a custom menu look in my template
  • ✅ I want plugin X installed and optimized in my theme
  • ✅ I need my current mega menu to to have a different look in mobile and desktop
  • ✅ I need to make the plugin X look like the other parts of my website in my theme
  • ✅ I need to customize my blog page to look like this

Performance & security optimization

This is another area where having extensive knowledge and skills is crucial – without which, you may risk your website health, data and security. If you have an active WordPress website with high traffic or several pages, you might want to have it audited by an expert for possible security measures and performance improvements.

Performance and security improvement checklists usually include the installation of SSL, caching and CDN services, which may require server and development knowledge and hands-on experience with different protocols and tools. It’s better if this is done by an experienced engineer.

  • ✅ I need a 90% Google Page Speed for my client WordPress website
  • ✅ I need a security checkup for my WordPress website
  • ✅ I need a checkup on the performance leaks of my WordPress website (unused plugins, image optimization, compression, etc.)

Converting to WordPress

This may be the most popular outsource WordPress task among different WordPress teams. Let’s say you like and select a WordPress theme but don’t know how to implement the designs you or your designer did. Or you’d just like to get it done by someone who is an expert on that theme and already knows the best practices rather than playing around with trial and errors.

For instance, a Jupiter X expert could help you achieve maximum design loyalty as well as the efficient usage of elements and plugins to convert your design from a variety of sources such as PS, Sketch or Adobe XD.

  • ✅ I need to create these templates with Elementor. 
  • ✅ I’d like to build my landing page with Jupiter X WP.
  • ✅ Can I convert my Sketch designs to WordPress?

Custom design

Well, this is not directly a WordPress development job but definitely a part of it. If you’re  creating a website for a very picky client or with special brand characteristics, you might want to have your website designed by expert designers exclusively based on your very own needs and preferences.

  • ✅ Design me the most beautiful WordPress website!
  • ✅ I’m representing a client with very unique brand characteristics, and we need a WordPress website for them.
  • ✅ I want to add a brand new template in harmony with the rest of my theme.

Maintenance, migration & content management

If you’re running an active website for yourself or for a client with regular content updates, you may want a helping hand in completing the usual maintenance such as WordPress updates, plugin updates, theme updates and regular health checkups, as well as content additions such as the creation of weekly or monthly posts.

You may also need help migrating your content from an existing website with many posts,  pages or products to a new WordPress theme (for example migrating from Jupiter to Jupiter X.)

You could handle this yourself if you have the skillset and enough knowledge about the original and destination platform. But if not or if you’re sensitive about your content and want a seamless migration, an expert will be helpful. They can assure a migration with maximum loyalty and with the best migration practices or content recreation in the destination platform for parts of your content that are not natively compatible and supported by the destination platform.

  • ✅ I want a seamless migration from Jupiter to Jupiter X.
  • ✅ I need a hand migration from Divi to Elementor.
  • ✅ I want a regular maintenance checkup for my WordPress website.

What should not be outsourced?

It’s good to think of outsourcing as a solution to get something that you don’t know much about done by an expert. Or if you have the knowledge base but you simply don’t have enough time to complete the project. If it’s the former, it’s still important to have basic knowledge about the essence of what you want done. This may include basic knowledge of WordPress and how it works. Some coding knowledge of the language you want can also be helpful if your project is purely related to development.

If you’re running a dev team and considering outsourcing part of the development to another team, then you probably have a deep knowledge of your WordPress plugin or app and you should note your contractor may take time to achieve the same amount of knowledge and familiarity with your product.

There might be a learning curve, trial and errors and even possible defects before your contractor learns as much as you know about your plugin.

  • ❌ I want to build the next Facebook with WordPress. Is that possible!?
  • ❌ I want to build an open-source CMS to rival WordPress.
  • ❌ I want a plugin developed to do all my accounting, site maintenance, online payments and security checkup for my WordPress website.

How to choose a WordPress outsourcing service

1- Begin small

If you’re new to outsourcing, it’s better if you start with small projects. You may face problems with outsourcing you didn’t expect and you were informed during your contractors sales pitch. It may take time for both of you to know each other’s needs and capabilities.

outsourcing WordPress development

If you’re considering a long-term relationship, starting small will help you minimize possible damages and errors and learn the best practices along the way. This is particularly true about the development projects where tight collaboration and in-depth knowledge of both parties is crucial for a successful collaboration.

2- Provide clear descriptions

Make sure to specify all the details and material your contractor requires to start your WordPress project. This changes depending on the project type but below might come in handy for common project types:

  • WP conversion > Well-organized design files with proper layer folder and naming conventions
  • Theme customization > Detailed list of requested functionalities – if a visual feature, possibly with an explanatory video.
  • Custom Design > Possible samples of design that you admire and reflect the design characteristics you want in your design. Also detailed brand guidelines.
  • Content management > Well-organized content that you want posted on your website such a text, images, video with details about publishing date, category and tags.

3- Consider the best price, not the cheapest

When it comes time to outsourcing, the cheapest price is not always the best deal. It’s the value/price ratio! Like we discussed earlier, there may be a dozen ways to do a specific thing in WordPress. If a candidate contractor offers a price slightly higher than others, try to ask them and figure what specific feature or capability makes them eligible for that.

If your project is just another ordinary WordPress conversion project, then anyone who knows Elementor and Photoshop can convert it. In other words, there is not high loyalty and quality standards for you or your client. This means that you’re better off considering a lower price. However if you have a special and loyal client who trusts you because you respect their values and brands, then you should make sure your outsourcing contractor shares those values as well so the final product you deliver to your client is coherent, consistent and seamless.

In which case you should not consider the low prices and be open to pay more for a team who aspires to high-quality standards and cares as much for your client as you do.

4- Work with good communicators

When outsourcing WordPress development, communication is maybe the most important factor to take into consideration after the value for price. The best teams to collaborate with are not those who have the best engineers or best-in-class designers, they are the best communicators. The most important factor that leads to a positive and progressive collaboration is communication, and without proper communication, your collaboration will be painful and will fail to produce satisfactory results.

outsourcing WordPress development

Make sure you know how you’ll communicate with your contractor team. Is it through a WhatsApp channel? Or an advanced briefing section built into their website? If you’re considering a long-term relationship with the contractor team, it’s good if you can establish a direct communication line and account manager who can directly interact with you.

Ideal white-label outsourcing teams offer different communication options such as phone calls, Zoom calls and briefing sections for their high-end and loyal clients.

5- Don’t proceed without a plan and written agreement

A risk factor of many outsourcing companies is that they are a group of coders and designers sitting in some unknown country behind computers and getting something done for you. You’re sharing critical information about your project, your business and your clients, so you should research the credibility of the team you are considering before starting working with them. 

Check to see if they have written and coherent terms of service. If they do, then study it carefully so you’re informed about possible incidents along the way.

Do you see your rights reflected in the agreement you sign? Do they have a refund or dispute policy? Do they accept your NDA terms? And so on.

Furthermore it’s best practice to use the briefing section you are granted to write down and document everything so it can be used in case it’s required in the future to refer to a specific part of the conversation or project. Conversations made over the phone or on a Zoom call might not be referred to in the future if necessary.

6- Find reliable partners – not doers

outsourcing WordPress development

An ideal team to get help from should be like any other team member, not an outside contractor just working behind the scenes delivering projects. If you want the best outcome from an outsourcing collaboration, you should foster a solid relationship that rewards both you and your contractor team and makes them as integrated into your team as your employed engineer or product manager. That is, of course, a mutual responsibility for both parties to achieve this level of trust and integration through offering each other the maximum value and mutual benefits.

What is WPDone?

Earlier this year, we rebranded our former custom modification subservice called Artbees Care into a brand new white-label WordPress Service called WPDone. WPDone is powered and operated by Artbees, the maker of the Jupiter X WordPress theme, and applies a decade-long experience with WordPress in delivering its clients’ projects.

outsourcing WordPress development

In WPDone, our goal is to become another member of your team – not just a contractor – and to build good products without our name on it. We helped achieve the highest quality standards, development technologies and aesthetics values for more than 11 global WordPress agencies from different continents within the scope of more than 600 WordPress projects. 

If you’re a high-volume WordPress freelancer or agency and are considering outsourcing WordPress development as part of a long-term collaboration with a white-label savvy WordPress team, then you can check out the WPDone Partners program for surprisingly good rates considering the high quality service you get.

Introducing Odise: Personalized Marketing Automated

Jupiter X has been around for about 7 years now. More than 130,000 websites from a wide range of niches have been built with Jupiter X. But is that it? What is it you should do after building a professional WordPress website?

What comes after a WordPress website is built? Growth

Once you build a WordPress website for your business your next move is obviously to expand your website audience. This means collecting and nurturing leads, making sales and retaining your customers. You could spend money for outbound marketing campaigns such as Google and Facebook Ads – but to do this organically, your best bet is your content.

By content, we’re referring to your website content, marketing campaigns, pop-ups, emails – essentially, anything and everything you use to promote your business to your audience. If you use a one-size-fits-all content policy, your audience engagement will be minimal. In other words, you need to give each segment of the audience the content they want.

Marketing is no longer one size fits all

Marketing is no longer a same-for-all reachout mechanism. In the near future, the only marketing that will be  relevant is personalized marketing.

Imagine that you can have a massive eye that watches over the journey of our site’s visitors from the moment they arrive until they are a loyal customer. And now imagine that this eye can provide visitors with different versions of your homepage based on their background, smart pop-ups tailored to their behavior and exclusive email campaigns suited to their purchase history.

For both personalized marketing campaigns and website content, you’ll need to incorporate many tools. Unfortunately, there are too many tools out there that are overly complicated and expensive.

Personalization is a cluttered and expensive space

Looking at the tools that help with main website content personalization, Segment is for enterprises, and Optimizely and Proof are also for enterprises but are relatively expensive for small-to-medium sized businesses.

Solutions in the personalized email marketing space exist such as Mailchimp, which personalizes based on audience behavior and engagement. However, this happens abstractly regardless of the global behavior of users on the website inside the app and so forth.

Pop-up creators such as Unbounce Popups or Sumo are also mere creators but fail to offer much in the way of personalization.

The bigger problem at hand is that these tools are not able to work together for personalization as part of a whole.

The closest solution for this is Intercom, which allows journey-based personalization but only through a chat widget and email notification. There’s no possibility to personalize in-page content, and again it’s fairly expensive for a small-medium businesses.

So, an all-in-one solution that makes it possible to personalize creation, monitoring and management based on global user behavior is sensible.

Meet Odise: Personalized Marketing Automated

Two years ago at Artbees, we thought of a tool that facilitates the personalization of marketing content (website, emails, pop-ups) in an all-in-one environment. A marketing assistant that can automatically personalize all marketing content based on user attributes and behavior.

We worked on Odise for about two years and recently released the beta version entirely for free on ProductHunt.

Odise is a marketing assistant that reveals the behavioral patterns of users across their journey on your website from acquisition to retention and automatically provides personalized website content, marketing campaigns, emails, pop-ups and more based on each user’s stage, attributes and preferences.

Introducing Odise - Personalized Marketing Automated
Automation Dashboard

1- Discover and oversee your customer journey

Odise provides multi-dimensional insight into your website users’ journey across your website in different stages – from acquisition to nurturing to conversion and retention.

Introducing Odise - Personalized Marketing Automated
A Customer Journey Sample

Select one or multiple dimensions and see what those users did on your website.

Multi-dimensional Customer Journey

2- Automate all your marketing activities in a ‘If This Then That’ dashboard

Having discovered different working and failing funnels, define automation rules to serve each funnel (as broadly or specifically as you want) as its own personalized experience.

Introducing Odise - Personalized Marketing Automated
Rule-based Marketing Automation

Automate marketing actions such as sending emails as well as showing or personalizing content for your visitors based on the stage in their journey.

3- Personalize your website content

The Webpage Personalizer helps you show everyone their own version of your website based on their stage, attributes and preferences.

This Odise personalizer tool allows you to make changes as well as add or remove content to your page without touching the source code.

Webpage Personalizer

4- Build and send personalized email campaigns

Create highly personalized emails for your leads and customers and contact them across their journey on your website.

Introducing Odise - Personalized Marketing Automated
Personalized Email Builder

Use Odise’s powerful email builder to create smart email templates or use one of its various carefully-crafted readymade templates.

Introducing Odise - Personalized Marketing Automated
Readymade Email Templates

5- Build and serve personalized pop-ups

Create personalized pop-ups to collect and nurture leads, as well as to convert and retain your customers.

Personalized Pop-up Builder

Or use one of Odise’s various readymade templates in different categories such as lead generation, discount, cart abandonment, giveaways, events and more.

Personalized Pop-up Templates

6- Get human-made analytics reports about your marketing activities

Enough of useless attribution and analytics reports! See tailored performance reports about your website performance and automation. Odise’s analytics reports will allow you to make decisions about your next move – nothing more or less.

Automation Reports

Define a timeframe and see a list of your topmost items in each dimension such as location, landing pages and sources.

Introducing Odise - Personalized Marketing Automated
Actionable Analytics

What’s next? A.I. enters the scene!

Our next step is enabling artificial intelligence, which will take a load off the shoulders of the website tenant by monitoring their website, suggesting the right practice and eventually taking over all marketing activities from ideation to execution to reporting.

Try out for free and help us shape the future of marketing

You might be surprised to learn that Odise is now totally free! We’ve invested two years at Artbees to make a bootstrapped and independent product that solves problems we think many small-medium businesses have with marketing on their own. We deliberately released it totally for free at the beginning to collect honest user feedback and shape its future before we start monetizing it.

Our aim is to make personalized marketing an affordable, easy and mainstream marketing activity – not a marketing luxury carried out only by big brands and corporations.

We cannot wait for our community to try this on their WordPress websites and let us know what they think about it. Does it help them grow their business? What is missing? And what direction should we take going forward?

WunderWP: Introducing Preset and Custom Elementor Templates on the Cloud!

Earlier in October, we introduced WunderWP, a small, useful and completely free tool that helps you save your widget styles to the Cloud and reuse them in any Elementor project. Additionally, you can use the free preset styles created by WunderWP and use them in your projects for free. To get a head start in 2020, we are now back with even more features for WunderWP!

In addition to custom and preset styles collection, WunderWP now allows preset and custom Elementor templates on the Cloud. You can now create and save your section or page templates in the Cloud and reuse them in any Elementor project. Or – just like preset styles – you can simply choose one of the preset templates created by professional designers and quickly and easily put your content together.

Reusable content templates

Ever spent time and energy in creating an Elementor page only to later notice other Elementor projects contain the same content and design? WunderWP now allows you to save your content templates – such as a specific section or whole page – and reuse them as many times as you want. Just create a section or a whole page, save it in the WunderWP Cloud and use it in as many websites as you’d like.

Elementor itself allows you to save and reuse content templates but it can only be used in the same Elementor installation, meaning it cannot be used in your other Elementor projects. WunderWP now makes it possible to use all the templates you save in the Cloud in any of your connected websites.

Preset and custom Elementor templates Gif

Readymade content templates

These days, most websites repeat the same type of design. A header section is mostly a combination of a logo, a menu bar and search field put together in a particular order – such as left-aligned or centralized, sticky or multiple-row. So what if there was a collection of header layouts with different combinations of these elements that we could quickly insert, tweak and use in our Elementor websites? Or let’s say that you don’t have a taste for design at all and don’t want to pay a fortune to hire a designer.

The new preset templates provide you with a collection of preset templates for a complete page or a section of a page. Instead of building everything from scratch, the preset Elementor templates allow you to put a page together quickly with preset content. Simply drag a preset intro section, an about section, a services section or a call-to-action section to your page and create a beautiful page in seconds.

Preset section templates are a combination of widgets created and optimized to be usable in a variety of contexts and for different purposes. For example, the About Us readymade section template comprises a nice heading widget along with a description beneath it and a Team Element widget along with a Learn More button for each member. Everything is well-organized with the right order, composition, and appearance.

There more than 50 premade section templates available at the moment covering a wide array of purposes such as team, about, contact, call to action, header, footer, services, countdown among much more. We’ve provided a few examples below.

Contact Us

Preset and custom Elementor templates Contact
Free Contact Section templates

Call To Action

Preset and custom Elementor templates CTA
Free Call-to-Action Section templates

Features

Free Features Section templates

Header

Free header Section templates

Team

Free Team Section templates

All your Elementor design assets together on the Cloud

WunderWP allows you to store your Elementor design assets – including your custom widgets styles and content templates – all in one place on the Cloud and easily use them for the websites connected to WunderWP.

It helps web designers or even beginner Elementor users save a lot of time creating content in Elementor. WunderWP enables anyone who uses it to quickly create a layout with preset and custom Elementor templates and to save their hard-earned design work as reusable assets for future projects. All this without repeating all that effort.

At this phase, we’ve delivered the 4 main features of WunderWP, and we’re thrilled that we could make them available all for free. We’d like to know the Elementor community’s feedback on it and what they think should be the next step to take for WunderWP😉. If you have questions, ideas or comments for WunderWP, please do share it with us to help WunderWP evolve in the best way.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Bring it on! Insider Tips for Your Next Sports Website

Featured Tips For your Next Sports Website

Let’s start with a simple clue that sums up this and all other similar topics: the best website design is one that allows the audience to predict what the site is about without seeing the textual content. Imagine entering a law firm website – you’ll immediately be able to guess it has something to do with the law. Or you land on a traveling agency website, and you can automatically tell it’s about traveling and tourism.

All comprising elements of a website – and not just its imagery – play a role in carrying on this mission. The main layout, composition, colors, typography and the elements are a part of it. The very same thing is true about a sports website. In this post, we’ll provide some valuable tips for your sports website you can easily use to build something that speaks for itself – without relying too much on its textual content. We’ll use vast a range of Jupiter X templates as examples for gym, powerlifting, yoga, meditation, pilates, and sports event websites.

Layout and composition is a cornerstone

First things first! The layout and composition are the primary factors in the design and the foundation for everything built upon it. Without a solid and clearly thought-out layout and composition, your content will always seem like it lacks something.

Vast sections with bold imagery

A powerlifting center, a gym or an off-road club can enjoy a layout built by vast sections with bold typography and large imagery. If you or your client can afford professional photography from the venue (or at least a Shutterstock subscription!), this layout will help your website shape an image of power and athleticism without much textual content. Jupiter X Caelus and Carius are good examples of sports website templates built in this way.

Vast Sections Tips for your Next Sports Website

Diagonal sections

In graphic design theory, ordinal lines imply movement, dynamism, and livelihood. Using this feature in a website layout will add a level of visual dynamism and excitement for your audience as they scroll and explore your page. It’ll drive them efficiently towards engaging with your call to action. The Jupiter X Hercle template, which is specially designed for off-road clubs and professionals, has expertly used this technique in its layout.

Diagonal Sections Tips for your Next Sports Website

And the Hermippe template is an excellent example of utilizing this technique for a gym website.

Diagonal Sections 2 Tips for your Next Sports Website

Colors are energizers!

Color is like the air your page requires to breathe. One excellent tip for your sports website: a color-aware design will appeal to your visitors and make professionals such as designers say “wow, this company hired the right designer for their agency.” Think of what design will signify your or your client’s brand values. If it’s a gym or dojo, your brand will definitely need sharp and preferably warm colors to carry its meaning.

The Jupiter X Hebe template uses a mixed approach for its accent color. It uses an accent color that is somewhere between green and blue. Green signifies nature, calmness and a golf course, and blue signifies stability, depth and horizon. That’s about all the meaning a golf club needs to convey.

Color Golf Tips for your Next Sports Website

If your brand wants to promote peace, composure and balance like a meditation or yoga house needs, use calming colors such as green with friendly tones and lower saturation. Have a look at the Feretrius template to see a live example of calming colors in action, which illustrates to the audience a glimpse of peace and calm they can achieve doing yoga or meditation.

Color Yoga Tips for your Next Sports Website

Show visitors their future selves in the photos

Imagine you’re looking for the nearest gym with the facilities and conditions you want. You’ll find some viable places through using Google, Foursquare or Yelp, but you’ll definitely want to check their website before calling and booking an appointment to visit and possibly subscribe. And hey, while you’re at it, you definitely don’t want to read blog posts or even a couple of paragraphs about the history, philosophy and achievements of the club you are considering. What you will do is just skim the homepage or landing page.

This is typically the audience for a sports club website; they mostly are in a rush and don’t have much time to spend on a landing page. So you won’t have much time to appeal to and persuade this type of visitor. This means you should use your page assets accordingly and efficiently.

The first thing to consider is imagery. Your visitors will rely a lot on what they can get through quickly scanning your page, and images are definitely a good way to capture those scanning eyes. Good imagery for a sports website requires professional photography or some great collection of stock photos related to your area of specialty. If you rely on stock images for your sports website do make sure they are:

  • High quality: Captured by professional photographers
  • Well-light: Not too bright or too dark
  • Matching in color: They align well with your design color palette, especially with your accent color

Also, it would be good if you can show consistency in the stock photos you use, for example, with the same model posing in the photos. The Jupiter X Devagura template uses stock photos in the template, but they are used seamlessly in the hero section of all pages in accordance with the page content and design characteristics.

Write to motivate – not communicate

Following the same mindset we discussed in the last section about the visitor’s short attention span and importance of the right imagery, I want to emphasize the same thing about the role of writing in your sports website. Another tip for your sports website is that writing is more of a marketing tool than a means of communication. The copy for your sports website should work hand-in-hand with all other elements discussed in this post to drive the audience forward, motivate them to hit the gym and to work those muscles. So imagine the type of writing we need here:

Writing Tips for your Next Sports Website

If you can easily understand that you should not begin your website with a big ‘Welcome to our official gym website’ in the hero section, then you can say you’re qualified to write your website copy yourself – and you’re good to go! But if not, you really need to consider hiring a copywriter to write your website copy that aligns with your and your brand’s specific values.

Use an athletic typography

What you say is not enough – how you say it also matters. Remember you’ll need good typography that matches the message you want it to carry. Consider Oswald, Anton and Source Sans Pro as great sports fonts that can be used in a gym or powerlifting club website. They are also standard Google Fonts that are available to use for free.

Typography Club Tips for your Next Sports Website

If it’s for a meditation, pilates or yoga website, then you might want to think of a more sleek font with less emphasis on power, movement and challenge and more on calmness, elegance, and peace.

Showcase – don’t just tell – your athletic story

Any business or personal brand has a history. But a sports brand also has a story. You came a long way striving, struggling and failing before you achieved where you currently are. If you think it can inspire your website visitors and motivate them to start working out under your guidance and expertise, you’ll need to showcase your story and achievements like an athlete, not like a resume.

The Jupiter X Vinalia template beautifully showcases a challenging athletic history with a timeline. Each year gets a title, image, and description with a color identity. Once you start tripping down memory lane, you can’t help but scroll. You can expect your visitors are twice as more confident in taking their first course with you after scrolling through this page.

Tell visitors why you are the best to train them

Without too much marketing pressure, you should convey to your visitors who you are. You don’t have to do this the second they arrive on your website, but it should be somewhere on the first page of your website. Employ honest but confident language and explain your skills, exclusive points and why you think you are the best person to train your website visitor.

Team Members Tips for your Next Sports Website

The Jupiter X Pilates Studio template is a nice and informative pilates studio website template that uses trainers’ profiles with the Jupiter X Team Members element.

Make it personal and share your clients’ feedback

People will trust your sales pitch a lot more if you can manage to show that your clients are happy with your product or service, which is another great tip for your sports website. If you have satisfied clients, reach out to them and ask them to provide a testimonial about you and your service. If they hesitate, reward them with a free session in return. It’s definitely worth it!

If you want to design a website for a gym or studio, then make your website content as ‘humane’ as possible by including info about your instructors, quotes from them as well as testimonials from your customers. See how Pilates Studio uses the Jupiter X Testimonial element to beautifully organize customer reviews and feedback.

Animate it, make it fun

Movement is one ruling factor that all kinds of sports have in common (well, chess is an exception, I guess!). So how can we design anything related to sports that are not promoting or signifying movement? You can animate some parts of your sports website to add a sense of movement to it. Some elements such as sliders are naturally moving elements, but you can also manually move some elements such as sports figures and models.

The Feretrius and Vinalia templates from Jupiter X WP have used this idea to add a sleek sense of dynamism to their design. The parallax effect is another technique that spices up your layout by adding depth and movement. Using the parallax effect together with the manual viewport animation of elements is commonly used in tons of websites these days.

Add some hype to your sports event with a countdown

It’s a good idea to use landing pages instead of multi-page websites for sports events as people who come to these websites want to quickly see the essential info such as dates, conditions, and prices then sign up and leave. You can define 5 essential sections that cover all the info your participant wants to know. For example for an extreme mountain biking race, you need the following 5 sections:

1- Intro: Nice hero section
2- Countdown to your event
3- Some background info about the event and its experience
4- The roadmap
5- Outro: schedule + call to action

Using a countdown element in the hero section or the first parts of the landing page will add some hype to your event and encourage visitors to proceed with the rest of the page so they can sign up to participate before the time runs out. You can also show the number of remaining seats or slots to amplify the visitor’s sense of urgency. The Jupiter X Mountain Biking template is an excellent example of a website for a sporting event.

Possible call to action? Call, sign up, book, smash!

So thanks to following all the above practices and guidelines, your visitors have made it taking an action. Without a good call to action section or element, your best bet is that they’ll find your address or contact info from Google and proceed – but it’s also very likely that they’ll vanish to your competitor’s website where they can find all the info they need in one page.

There are different kinds of calls to action you can use for a sports website such as calling or booking an appointment. Alternatively, you can put your contact info and a contact box on your landing page or contact page for any possible inquiries. This is what is beautifully done in many sports templates from Jupiter X WP, including Farreus, Feretrius, and Hermippe.

Is that all?

Definitely no! Nobody can say the above list of elements and factors makes a working sports website. There are many ifs and if-nots involved in a website’s success. But you can definitely say these tips for your next sports website will help it engage and convert visitors more efficiently.

Do not forget to check the Jupiter X WP list of sports website templates if you want to kickstart your project with some solid design foundation provided by Artbees experts. And as always said, let us know in the comments if there is a factor or element you think is missing and should be included in this list or share your experience applying these practices to a sports website for you or a client.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Jupiter X v1.10: Custom Single Page, Archive Custom Template, Custom Title Bar and More

Recently we released Jupiter X v1.10. This new version pieces together some very exciting and frequently requested features and additions to Jupiter X. In this post, I’m going to outline the 4 most important features added in the version.

Custom Single Pages

Creating custom single pages was not previously possible in Jupiter X without Elementor Pro. It’s needed when you want to define a different standard design for a single page of your post type. It can help save a lot of time redoing a design for every post and also completely customize it for you or your clients’ needs and preferences.

Custom Single Pages for Blog, Portfolios & Pages

Before, you had to choose from readymade templates available in Jupiter X in order to add custom single pages to your blog and portfolio posts. But now, you can design your very own templates with Elementor and assign it to your portfolio and single pages.

After updating to Jupiter X v1.10, you’ll see a new tab labeled Single in the saved templates section where you can add and manage the single page templates. You can click on the Add New button and just like a regular header, page or section templates, you’ll be taken to the Elementor editing space to build your page whichever way you want and save it.

Jupiter X v1.10 Blog Single

Once saved, you can go to Customizer and simply assign the template you just built to all new portfolio single pages.

By using the same method, you can also create a standard design to apply to your page templates. Imagine that when your client requires specific elements on every page, you’ll be able to create a template including those elements to load every time they create a new page.

Learn more about new custom single pages in the knowledge base.

Custom Single Page for Custom Post Types

You can now define custom single pages for your custom post types as well. Imagine you’re running a hotel-listing website with tons of rooms you constantly manage, add and remove. You’ll need a custom post type with a custom single page design that includes only the content you require (e.g. room types, sleeps, amenities, options, price, etc.)

Jupiter X v1.10 Post Single

Or say you are creating a talent-listing website for a headhunting company with a large database of freelancers. They need a custom talent post type with a custom single page that includes the talents’ information such as personal information, location, bio, experience, skills, etc. with a vertical portrait next to this info. You’ll need a custom layout that you cannot find in the readymade blog single styles in Jupiter X.

In Jupiter X v1.10, you can simply create a custom single page for your custom post type and make it standard for all future posts in that post type.

Learn more about new custom single pages for custom post types in the knowledge base.

Dynamic Content in Custom Post Types

The attributes you need to include in the single pages for hotel and outsourcing website examples are custom data sets that are not normally included in a blog or portfolio single page. In order to add all this info, we need to do two things:

  • Inside our custom post type, define and add a set of dynamic content fields for the custom attributes we need (rooms, price, skills, bio, etc.). These fields will appear inside the post meta section in the single page in the backend. The tenant will set the value for each attribute and publish the post
  • The attributes along with the values set by the tenant for each should appear in the frontend. So we should add each dynamic data set we require inside the blog single page for the custom post type as well.
Jupiter X v1.10 Custom Elements

All this is now possible with Jupiter X. Thanks to the new Dynamic Fields Mapping feature, you can add a variety of standard elements to your custom single page such as heading, image, button, video, text editor, as well as many dynamic elements such as post content, post comments and post meta.

Custom Archive Page Template

If you want a custom design for your blog, portfolio or any other post type archive page, you are now able to do it without any other plugin such as Elementor Pro. Thanks to the new Archive Custom Templates in Customizer, you can create, edit and assign custom archive page templates for any post type.

Using the advanced dynamic tools, you can add both the blog loop wherever you want in the custom archive page template as well as any other dynamic content to your template:

  • Heading Element
  • Image Element
  • Video Element
  • Button Element
  • Text Editor Element
  • Photo Roller Element
  • Posts Element
  • Posts Carousel Element

Assigning a custom archive page for blog and portfolio is easy with Customizer. If you need to assign the archive page template to your custom post type, simply enable your desired custom post type from Jupiter X > Control Panel> Settings and check the Customizer settings again. You will see the post type name in your Customizer menu, and it will give you the ability to assign custom templates to it.

Learn more about new custom archive pages in the knowledge base.

Custom Title Bar Template

With Jupiter X, it was previously possible to customize the comprising elements of the Title Bar such as the container, title, subtitle, breadcrumb or enable/disable the title bar for different post types. However, it was not possible to create a custom design from the ground up and set it as the standard page title. Now it’s possible.

In Jupiter X v1.10, you can use Customizer to design a custom title bar just like a page section in Elementor and assign it as your page title. With the help of the newly added Breadcrumbs element to the Raven plugin, it’s also possible to choose between Jupiter X default Breadcrumbs, YOAST Breadcrumbs, and NavXT Breadcrumbs.

Would you like me to give you an example of this feature? Though so. Imagine you wanted to add a dynamic image to the background of your title bar so each page could have its own title bar background image. Similar to any other dynamic templating feature, you can now assign a dynamic background image element to your page title container section and set it to fetch the source from the featured image. Isn’t that cool?

Learn more about the new custom title bar template in the knowledge base.

Global Typography Option for Post Content

This is a feature that has been frequently asked about by heavy-duty bloggers and writers. In Jupiter X Customizer, you were able to customize the look of many things in your blog single page including the featured image, title, meta, tag, social shares and more – but the main body text was not one of them. If you weren’t using Elementor to write blog posts, there was no way you could define standard formatting for the main body text in your blog single pages.

With the latest update, you’ll have a Post Content section among your blog single style tab in Customizer where you can define all the formatting attributes for your body text in the blog single page. This is not limited only to your blog post content, as you can do the same thing for a portfolio and any custom post type single pages as well.

Learn more about the new post content formatting in the knowledge base.

What’s Next!

What’s next is great projects made by great people for great people! We believe the newly added features – particularly the custom single pages and the new dynamic content in custom post types – adds even more capabilities to Jupiter X as a WordPress website builder. Dynamic content alone opens a whole new chapter on the types of websites that can be created by Jupiter X. Just one example is various listing websites!

In the near future, we’ll publish blog posts to exclusively cover each of these features more in-depth. Until then, we’d like to know your feedback about Jupiter X v1.10 and if you think its features might come in handy for your next Jupiter X project. Let us know in the comments and stay tuned for related blog posts soon 😉

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Introducing WunderWP: Preset Styles for Elementor and More

Earlier last week we introduced WunderWP on ProductHunt. A new and free tool for Elementor that takes away a long-lasting pain shouldered by Elementor users. Let’s talk a little more about why this product was ideated and what problem it solves. Why on earth were preset styles for Elementor needed in the first place?

What is WunderWP?

WunderWP applies preset styling for Elementor widgets and beautifies your content in seconds. It helps you save big time by using its readymade styles to build your content and get your website up and going.

What problem preset styling for Elementor solves

Everyone who has used Elementor widgets knows that they are not ready to use right away! They won’t look nice until you put a good amount of time and energy stylizing and shaping them into something you want for your website. If you want to go about doing this, there are simply too many options and settings to deal with, and you need to make sure that what you customize looks professional and visually appealing.

All of this is time-consuming – and not to mention boring! WunderWP saves you that time by bringing on hours of work put by skilled designers and Elementor experts at Artbees to beautify your raw Elementor widgets and let you focus on the more important aspects of your project.

How WunderWP solves the problem

Regardless of which theme you use, once you install WunderWP, preset styles will appear in your element settings under the Content tab.

Preset Styles for Elementor Choose Style

Try different styles by clicking on their thumbnails and see which one looks better on the element and get something that more closely matches your preference. Voila! The ugly-looking default widget instantly turns into something beautiful.

Preset Styles for Elementor Before and After

New styles from the WunderWP Cloud

WunderWP adds new styles for different elements over time and, as long as you have the plugin installed, your library automatically updates itself with the latest preset styles for Elementor.

Compatible with everything Elementor

WunderWP is free and compatible with all Elementor-based themes, Elementor Free and Elementor Pro. It is also fully compatible with Jupiter X and the Raven library. Jupiter X users can simply download it from the WordPress repository.

250+ preset styles?

At the moment, WunderWP provides the following number of styles:

  • 105 element styles for Elementor Free
  • 139 element styles for Elementor Pro
  • 36 element styles for Jupiter X Raven

…and new styles are being added over time!

Is it possible to save/reuse my own styles?

At the moment, it’s only possible to apply WunderWP’s preset styles but this sounds like a tempting feature! If you’d like to be able to add your own styles and reuse it again for other elements, please do let us know if you want to see that in WunderWP!

What’s next

WunderWP was ideated to automate styling and to create something like readymade website templates but for individual widgets. This helped us produce website templates for Jupiter X at a more rapid pace and then we thought that maybe it could be of use as an independent plugin for Jupiter X users and maybe all Elementor users.

WunderWP is doing its job at the moment, and we’ll keep adding beautiful styles to it over time but are there other directions it can go in? Yes, there are! There could be preset styles for Elementor that could be applied globally on the website. Or, for example, there could be automation and readymade content for other content types!

It’s up to how our community reacts and which features they’d like to see next! We’re eagerly waiting by to hear your feedback before we decide the next move 😉 You can follow WunderWP on social media to stay current with the latest styles and features added to it.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Here’s Everything You Need to Know About the New Generation of Jupiter X Templates

If you’ve been checking the Artbees weekly newsletters in recent weeks, then you may have noticed the recent new additions to the Jupiter X templates world! We not only added an advanced search module to the Jupiter X templates repository and to some of the landing pages but we also added about 60 brand new templates that are different in many ways.

In this article, I’m going to explore a little more about these additions. So let’s start with why we ideated and released this new generation of templates and which problem we tried to solve with them.

What are the problems with the usual website templates?

1- They are a dumb piece of generic design!

They are all generic so they can hunt a bigger chunk of users with one template. You can easily say when a website is built upon a template.

2- They look perfect until you touch them!

Just take a look at it on dumblatemobster.com, which is as charming as a McDonald’s Hamburger until you unbox it!

3- They are lifeless, not lifelike

Website templates basically do not reflect a real mission and purpose in their content. They are not really built to carry out a purpose.

Meet Jupiter X’s latest round of templates

In its update to the template repository over the past two months, Jupiter X has added about 60 new website templates for you that addresses all the downsides of the usual website templates! And they are from a vast category of niches and types. They encompass businesses and sectors such as agencies, leisure, online shops, creative portfolios, blogs, health, restaurants, listings, startups, events, community and much more. And even more stunning templates are on the way every month.

Jupiter X Templates Samples

So what are these templates capable of in addition to being beautiful, customizable and responsive?

New Jupiter X templates carry a purpose

Long gone are the days of “design is beauty.” Design means more of purpose than aesthetics now so despite a usual template’s promise. Even when you add your copy and replace the dummy images with your own images. you are far from the actual website you were waiting to see. It’s because your template is just a presentation without a mission.

Purposeful Architecture

The new approach in template design at Artbees is not only in designing a visually appealing template. It’s a design that serves the mission of that template. The mission of a template consists of:

  • Mission of the website as a whole (based on its category and niche)
  • Mission of the homepage or landing page
  • Mission of the inner pages

The driving force and philosophy behind the new templates is to fulfill these missions.

Jupiter X Templates Purposeful Architecture

Targeted Design

Your template’s design boils down to your customer profile and what is appealing to your business audience. The category/niche belonging to a template plays a critical role in its design. The characteristics of the target audience for that business have been deeply thought about and the findings are made sure to get reflected in that niche’s template design.

Jupiter X Templates Targeted Design

Actionable Storytelling

Your Jupiter X template will convey your remarkable story tailored to a specific audience. It’s geared to generate leads and convert those leads into paying customers. Sometimes this is done with a mouth-watering food menu and a booking option right underneath. Or with a timeline and list of achievements to showcase a company’s credibility and trust with an option to call or email.

Jupiter X Templates Actionable

Content such as hero sections, headings, and call-to-action buttons are now in complete harmony with your website’s purpose and goal. Moreover, most of the templates now include nimble pop-up designs that support your site’s mission by drawing in subscribers or helping to boost sales.

Meet Jupiter X Advanced Template Finder

With the new 60 templates added to the repository, the Jupiter X template count now exceeds 220. While this might be an impressive figure for a WordPress website builder, it can also be worrisome for some users as they are left with several options and unsure about how to find the right template for themselves.

Jupiter X Templates Module

In order to better organize the growing number of Jupiter X templates, we built an advanced template finder module into the Jupiter X control panel as well as our demo websites. This is a powerful tool that locates the right template(s) based on the various factors that you set such as:

  • Keywords (manually entered)
  • Category
  • Style
  • Header Type
  • Menu Type
  • Components
  • Content-Type

Once you get your hands on it, it’ll prove a very effective way of filtering down the templates you are really after instead of wasting time opening and checking irrelevant templates.

What’s Next?

Jupiter X templates are a tool you can use to build authentic-looking websites with genuine content for businesses with a goal. And the best part? You don’t need to be a designer or a marketer. So the quick answer to the above question is: ‘A lot more new templates’! We will constantly build new templates based on this new approach and add them to the repository.

Stay current with the new added templates by checking the Artbees weekly newsletter and let us know if there is any niche or category you’d like to see as the next template released in Jupiter X. We transformed our template design approach based on Jupiter X community feedback and now look forward to your feedback about how we did it. Enjoy what’s left of the summer 😉

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Artbees Takeaways from WordCamp Europe 2019

WordCamp Europe 2019 was the biggest and the best WordCamp I have ever attended. But that’s not what made it special. What WordCamp Europe 2019 successfully accomplished for the first time was holding a massive event without falling into the usual pitfalls of events this size.

In my first encounter with WordCamp Europe 2019 at the Estrel venue in Berlin on June 20, I recalled events such as Web Summit. It was a three-day event held in a huge venue packed with talks, workshops, booths, and activities with thousands of attendees. It was the largest WordPress event ever, with 3,260 tickets sold and 2,734 attendees.

The attendees came from 97 different countries, and 1,722 of them had never attended WordCamp Europe before. Events this size must be quite difficult to organize and might require months of planning, arrangements and hundreds of people involved.

How was it different from any other WordCamp?

Events on this massive of a scale might end up making them mediocre with poor organization, average talks and bad service for attendees. But this is exactly where WordCamp differed from events like WebSummit. WordCamp 2019 was an event much larger than its usual size and so wonderfully organized that its scale didn’t make it mediocre.

The other important way WordCamp sets itself far above other large-scale tech events is that it’s driven by the community, not profit. Look at an event like WebSummit or the TNW Conference, and you’ll notice an event designed to make money. At these events, celebrities are invited to a venue with a private jet to talk about your run-of-the-mill topics so more people in that crowd understand it. This is the problem in events that sell as many tickets as possible to earn more money and end up with a very disparate audience!

WordCamp Europe 2019 Estrel

An event like WordCamp is designed primarily to gather members of a community, rather than running a business to make money out of it. It’s very common to see someone who is a speaker at one WordCamp to be a volunteer at another. And yes! Volunteers aren’t volunteering for a reference letter here! WordCamp Europe 2019 didn’t just set a new standard for continental WordCamps but also set one for other tech events.

Jupiter X in WordCamp Europe 2019

Artbees attended WordCamp Europe 2019 on June 20-22 in Berlin. We had the pleasure of not just attending but also co-sponsoring the event this year. Jupiter X had one of the busiest booths in a small business hall in WCEU this year.

It was also our first WordCamp where we gave away a small but lovely prize. The Jupiter X AirPod Giveaway was so welcomed by the attendees at WordCamp this year that during the drawing session on the last day of the event, our booth was hardly able to host the massive crowd waiting for their name to be selected from the box as the winner!

Meeting with Jupiter X users, friends and partners

We had so many great guests stop by the Jupiter X booth for a visit, including some of our fantastic users, fellow authors in the Envato market, our friends in the industry and the WordPress community.

Meeting with the Envato Team & Envato Worldwide

We had various meetings with the Envato team during different WordCamp Europe 2019 events. On Envato Worldwide Day, which was one of the side events, we met with and greeted the great Envato team. Cameron Gough, James Giroux, Stephen Cronin and Aaron Rutley from the Envato team stopped by our booth during the first conference day for a nice chat and some fruitful discussions about the state of WordPress, the Envato market, trends and more.

It was also a pleasure having a special meeting with Cameron Gough – General Manager of Content at Envato – and to share some ideas and suggestions regarding ThemeForest as one of its authors. Cameron is not just a great human but also very determined to reflect the authors’ voices in Envato and to take some huge steps forward by addressing issues and possible improvements to the marketplace.

It’s also been a year in which Envato is hosting meetups of their own called Envato Worldwide in different cities around the world, including London, Amsterdam, Kyiv, Warsaw, and Saint Petersburg. As part of their worldwide tour, they held a meetup in Berlin a few days before WordCamp Europe 2019.

Envato Worldwide meetups are a great combination of keynote presentations, local author presentations, networking, Q&A sessions and a nice after party. As members of the Envato community, we were thrilled to meet and greet with some of the great authors in ThemeForest as well as the amazing members of the Envato team, discuss ideas, share experiences and learn from one another.

WordCamp Europe 2019 Contributor Day

There is no denying that one of the best parts of every WordCamp is the Contributor Day. At large WordCamps like WordCamp Europe, it’s even better! What you could see was a large hall filled with passionate community members who were helping to build or expand some aspect of WordPress.

500 contributors formed different groups such as core, review, marketing, support, polyglot, design, etc. and were led by 37 experienced lead contributors to different MakeWordPress projects. From Artbees, Gulhan joined and contributed to the “theme review” team. Rouzbeh contributed to the marketing team, and Nel joined the community team just like at WCEU 2018.

During Contributor Day at WordCamp Europe 2019, we also had an exciting encounter with the one and only Matt Mullenweg, WordPress co-founder and CEO.

WordCamp Europe 2019 Gulhan and Carolina
Gulhan with Carolina Nymark from the “theme review” team on Contributor Day
WordCamp Europe 2019 Contributor Day Matt
The Jupiter X team with Matt Mullenweg at WordCamp Europe 2019 on Contributor Day

The group photo taken at the end of Contributor Day may have been the biggest photo ever taken at a WordCamp. Check for yourself and see how many of Artbees members you can find in the crowd!

WordCamp Europe 2019 Group Photo
Photo courtesy of WordCamp Europe 2019

Talks

Unlike last year, we were running a booth at WCEU this year, so, unfortunately, we could not attend most of the talks. There were some great topics and speakers I shared in our “we’re heading Berlin” post on June 13. But one talk in particular that is most talked about at every WordCamp Europe or WordCamp US is Matt Mullenweg’s State of WordPress talks.

This year, he again went up on stage thanking and giving a round of applause to the organizing team and sponsors who made possible what he called the best WordCamp ever. He explained the latest developments of different WordPress projects, especially Project Gutenberg and its roadmap in the coming months. And, as usual, it concluded with a Q&A session.

Side events

There were several side events before and during WordCamp Europe 2019. We were invited to a side event or afterparty almost every day before WCEU and during the conference days.

Just like at WCEU 2018, we joined Elementor’s side event this year but with a brand new name called “Meet the Makers of Elementor.” This event was much more than an afterparty and included various sessions such as workshops and keynotes. I’m sure this will be a good beginning for them to make great community get-togethers in the future.

WordCamp Europe 2019 Elementor Makers

Just like WCEU 2018, the Freemius team held a lovely side event in Berlin to gather different kinds of WordPress community members. It was great to meet Vova at this WCEU and engage in some insightful discussions about their service Freemius, which is a platform for WordPress businesses to operate on.

WordCamp Europe 2019 Freemius

Afterparty

A WordCamp is never complete without its afterparty! Just like many other WordCamp Europe attendees, we were counting down the seconds for another great afterparty for WCEU 2019, and it definitely lived up to the hype! The afterparty this year was a 4-hour long chat, complete with music and dancing with a party theme I’ve always liked: the 80s!

WordCamp Europe 2019 Jupiter X Afterparty
The Jupiter X team at the WordCamp Europe 2019 afterparty!

Closing Talk

The WordCamp Europe 2019 closing talks were a holistic review of this year’s event with tons of interesting figures about its contributors, volunteers, sponsors, speakers, and attendees. Though there was a section this year celebrating those who helped make the event happen but couldn’t attend the event.

Like any other event, WordCamp Europe 2019 was not without issues. But the great thing about WordCamps is that you can see a noticeable betterment after each WordCamp from city to city. WordCamp 2019 in Berlin was definitely a better WordCamp than WordCamp Europe 2018 in Belgrade – and hopefully, WordCamp 2020 in Porto will be better as well!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Different Ways to Add Custom Code Snippets in WordPress

Custom Code Snippets in WordPress Featured Image

Used by more than 60 million websites, WordPress is a popular, powerful and flexible Content Management System (CMS). One of WordPress’ valuable features is its extensibility architecture that allows users to expand WordPress features via plugins. In many cases, site owners need custom codes to improve the functionality of their website. In this way, custom code snippets plugins in WordPress can be a handy tool.

Sometimes when surfing the internet, we come across articles that explain how to add custom code snippets to the template files like index.php, footer.php or edit function.php files. These methods aren’t safe or recommended.

There are only two safe methods to add custom code snippets in WordPress:

  • Using plugins
  • Using the child theme

Adding Custom Code Snippets in WordPress Using Plugins

There are some plugins that allow you to add custom PHP, HTML, CSS and JavaScript codes in WordPress. In this article, we try to cover some of them with examples. Some of the plugins are listed below.

Insert the PHP Code Snippets Plugin

Custom Code Snippets in WordPress - Insert PHP Code Snippet

Using this plugin, we can add our PHP code conveniently to our pages, posts and widgets.

Features

  • Convert PHP snippets to shortcodes.
  • Insert PHP code easily using a shortcode.
  • Support for PHP snippet shortcodes in widgets.
  • Dropdown menu in TinyMCE editor to easily select snippet shortcodes.

Example

In this example, we want to display the number of content words in a post/page after a post or page.

1. After installing this plugin, click on PHPCode Snippet from the left sidebar of the admin page.

Custom Code Snippets in WordPress - PHP Code Snippets

2. On the new screen, click on the Add New PHP Code Snippet button.

Custom Code Snippets in WordPress - PHP Code Snippets 2

3. Set

  • Tracking Name: words-count
  • PHP code (this code displays the words count for a page or content post)
<?php

  function word_count() {
       $content = get_post_field( 'post_content', get_the_ID());
       $word_count = str_word_count( strip_tags( $content ) );
       return $word_count;
    }

  echo 'Words:', '  ' , word_count();

?>
Custom Code Snippets in WordPress - PHP Code Snippets 3

4. Click on the Create/Update button.

5. The plugin generates a shortcode as [xyz-ips snippet=”words-count”].

Custom Code Snippets in WordPress - PHP Code Snippets 4

6. Go to Posts > Add New. At the end of the text, insert the above shortcode.

Custom Code Snippets in WordPress - PHP Code Snippets 5

7. After publishing the post, we can see the number of words in the post.

Insert the HTML Snippet Plugin

custom code snippets in WordPress - Insert HTML Snippet

Inserting the HTML Snippet allows us to create shortcodes corresponding to HTML snippets. We can create a shortcode corresponding to any random HTML code such as JavaScript codes, video embedding codes, CSS codes, among others and use the same in posts, pages or widgets.

Features

  • Convert HTML snippets to shortcodes.
  • Convert Javascript codes to shortcodes.
  • Convert CSS codes to shortcodes.
  • Support for snippet shortcodes in widgets.
  • Dropdown menu in TinyMCE editor to pick snippet shortcodes easily.
  • Insert Adsense or any add codes.
  • Insert flash, videos, etc. to your posts, pages, and widgets.

Example

In this example, we want to generate a Google Translate button after our post.

1. Install the plugin, and go to XYZ HTML > HTML Snippets.

Custom Code Snippets in WordPress - HTML Code Snippets 1

2. On the new screen, click on the Add new HTML Snippet button.

Custom Code Snippets in WordPress - HTML Code Snippets 2

3. Set

  • Tracking Name: translate
  • HTML Code (this code generates the Google Translate button)
<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

4. Click on the Create button.

Custom Code Snippets in WordPress - HTML Code Snippets 3

5. The plugin will generate the shortcode as [xyz-ihs snippet=”translate”].

Custom Code Snippets in WordPress - HTML Code Snippets 4

6. Go to Posts > Add New. Set the title and content the add [xyz-ihs snippet=”translate”] at the end of the post.

Custom Code Snippets in WordPress - HTML Code Snippets 5

7. Publish the post, and you will be able to see the Google Translate button after the post.

Custom Code Snippets in WordPress - HTML Code Snippets 6

Simple Custom CSS and JS Plugin

Custom code snippets in WordPress - Custom Css

Customizing your WordPress site’s appearance can easily be done by adding custom CSS and JS code without modifying the theme or plugin files.

Features

  • Text editor with syntax highlighting.
  • Print the code inline or include it into an external file.
  • Print the code in the header or the footer.
  • Add CSS or JS to the frontend or the admin side.
  • Add as many codes as you want.
  • Keep your changes when you change the theme.

Example

In this example, we want to change the background color of the admin bar with the CSS snippet.

1. Install the plugin and go to Custom CSS & JS > Add Custom CSS.

Custom Code Snippets - Custom CSS 1

2. On the new screen, in the options section, check the Internal, Header, In Admin radio button and set the following:

  • Title : admin-bar-background-color
  • Code (code change background color of admin bar in the admin page)
#wpadminbar {
    background-color: rebeccapurple;
}
Custom Code Snippets in WordPress - Custom CSS 2

3. Click on the Publish button. You’ll be able to see that the admin bar background menu changed.

Custom Code Snippets in WordPress - Custom CSS 3

Code Snippets Plugin

Custom Code Snippets in WordPress - Code Snippets Plugin Banner

This is a powerful, simple and handy plugin that lets us add our PHP, HTML, CSS and JavaScript snippets to our websites.

Features

  • Providing a GUI interface.
  • Snippets can be activated and deactivated.
  • Categorize snippets with tags.
  • Snippets can be exported for transfer to another site.
  • Full-featured code editor.

Example #1

In this example, we want to disable standard widgets like Archives, Recent Posts, Recent Comments with the simple PHP snippet. The default page is similar to the image below:

Custom Code Snippets in WordPress - Code Snippets Plugin 1

1. Install the plugin, and go to Snippets > Add New.

Custom Code Snippets in WordPress - Code Snippets Plugin 2

2. On the new screen, set:

  • Title: Remove standard widget
  • Code (Remove Archives, Recent Posts, Recent Comments from the right sidebar of the homepage).
function unregister_default_wp_widgets() { 

    unregister_widget('WP_Widget_Archives'); 
    unregister_widget('WP_Widget_Recent_Posts'); 
    unregister_widget('WP_Widget_Recent_Comments'); 
}

add_action( 'widgets_init', 'unregister_default_wp_widgets', 1 ); 

3. Save and activate the snippet.

Custom Code Snippets in WordPress - Code Snippets Plugin 3

4. After reloading the homepage, you’ll be able to see that the Archives, Recent Posts, Recent Comments have been removed.

Custom Code Snippets in WordPress - Code Snippets Plugin 4

Example #2

In this example, we want to change the font size of the post with the JavaScript code.

1. Go to Snippets > Add New.

2. Set

  • Title: change the font size
  • Code ( Increase the font size when clicking on the post text and decrease font size when holding down the SHIFT key and clicking.)
add_action( 'wp_head', function () { ?>

<script        src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>

    <script>	
    $(document).ready(function(){
    $(".jupiterx-post-content").click(function(){
        if (event.shiftKey) {
            $(this).css({"font-size": "-=10%"});  
        } else {
            $(this).css({"font-size": "+=10%"});
        }
    });

  });

  </script>

<?php } );

3. Check the Only run on site front-end radio button and save it.

Custom Code Snippets in WordPress - Code Snippets Plugin 5

At the end, when clicking on the post text, the font size will have been changed.

Custom Code Snippets in WordPress - Code Snippets Plugin 6

Adding Custom Code Snippets in WordPress Using Child Theme

In WordPress, a child theme is a sub-theme that inherits all the functionality, style and features from the parent theme. The child theme is a safe way to change or modify the parent theme without modifying parent theme files.

Example

Let’s add our default content to the WordPress editor.

Our default content: “This is some custom content. I’m adding it to the post editor because I hate re-typing it.”

1. Active the child theme on your site (for more information, read this article.)

2. Go to Appearance > Editor.

Custom Code Snippets in WordPress - Child Theme 1

3. Open the functions.php file.

Custom Code Snippets in WordPress - Child Theme 2

4. Add the below code at the end of functions.php, then update it.

add_filter( 'default_content', 'my_editor_content' ); 

  function my_editor_content( $content ) { 
    $content = "This is some custom content I'm adding to the post editor  because I hate re-typing it."; 
 
    return $content;
}
Custom Code Snippets in WordPress - Child Theme 3

5. After modifying functions.php, go to Posts > Add New or Pages > Add New. You’ll be able to see that our default text has been added to the editor.

Custom Code Snippets in WordPress - Child Theme 4

Conclusion

In this article, we first introduced several plugins for adding custom code snippets in WordPress. We also included some examples on how to use HTML, CSS, JavaScript and PHP snippets using the plugins.

Finally, we showed how to add custom code snippets in WordPress with the child theme. Feel free to share your experience with us in the comments.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

WordCamp Europe 2019: Meet Makers of Jupiter X, Get Exclusive Swags & Win an AirPod!

WordCamp Europe 2019 Featured Image

Summer is here and so is another WordCamp Europe! WordCamp Europe 2019 will be held on June 20-22 at the Estrel Hotel and Congress Center in Berlin this summer, and we just cannot wait to attend another great 3 days packed with all things WordPress! This means meeting the best of the WordPress family and community, who will attend the biggest gathering of the technology that we, you, and one-third of the worldwide web loves!

What is a WordCamp?

The WordCamp Central website says, “WordCamps are informal, community-organized events that are put together by WordPress users like you. Everyone from casual users to core developers participate, share ideas, and get to know each other.” Every year, tens of WordCamps are held in different cities around the world. Local WordCamps focus more on local communities and continental WordCamps such as WordCamp Europe, WordCamp US, and WordCamp Nordic gather members of a wider region or from around the world.

Why should you attend?

WordCamps are where everyone who lives and breathes WordPress get together. Developers, businesses, designers and even end users. It’s a great opportunity to get to know and network with many people who might end up being your next colleague, business partner or customer.

WordCamp Europe 2019 - 3
Archived photo from WordCamp Europe 2018

They are also a great opportunity to experience and practice an event not driven for profit by a community not formed solely around benefits. This event is organized and run by a large group of volunteers and financially powered by sponsor funds and humble attendee tickets. So you will experience a different atmosphere and culture than what you may get at other events such as WebSummit or TNW Conference.

What happens at WordCamp?

WordCamps truly reflect the vibrant community that attends it. This dynamic two-three day event consists of different sections such as talks, workshops, contributor sessions, networking, WP Cafe, social hours, after parties and much more.

Contributor Day

Each WordCamp has a Contributor Day, which is a daylong session dedicated to contributing to the WordPress open source project. Different groups are formed to contribute in different fields such as core, design, marketing, community, and polyglot. WordCamp Europe will have its Contributor Day on its first day, Thursday, June 20.

wordcamp europe 2019 - Last year WordCamp Europe 3
Archived photo from WordCamp Europe 2018

Talks and workshops

WordCamps are also famous for their various talks and workshop sessions. Every year, hundreds of talks are presented by WordPress professionals at WordCamps about different aspects of WordPress – from development to business to marketing!

The WordCamp Europe 2019 schedule promises a vast variety of topics such as SEO, accessibility, Gutenberg, diversity, copywriting, support, REST API and more. Some of the sessions we are interested in attending include:

Matt Mullenweg Keynote

WordPress co-founder and visionary leader Matt Mullenweg has a famous ‘Matt on WordPress’ talk in which he shares the status of WordPress and its key points in the past 6 months (and the same at WordCamp US for the next 6 months of the year) as well as the short-term roadmap for the software.

What’s special about WCEU 2019?

wordcamp europe 2019 - Jupiter X sponsor image

As the second WordCamp Europe we’ll be joining, Artbees is attending WCEU 2019 at full capacity this year! Our very own Jupiter X is an official sponsor of WCEU 2019 and will happily showcase the product in our booth during the Conference Days on June 21 & 22. We will also join Contributor Day to contribute to the marketing, design and development teams.

wordcamp europe 2019 - Last year WordCamp Europe 2
Archived photo from WordCamp Europe 2018

In the days preceding WordCamp Europe 2019, there are great meetups such as Envato Worldwide organized by Envato, Meet Makers of Elementor by the folks of the Elementor team and the Freemius/WPEngine meetup, all of which we will try to attend.

Meet the makers of Jupiter X

Five members of the Artbees family, including the co-founders, will be in the Jupiter X booth at WordCamp 2019 during the Conference Days, as well as Contributor Day and many side meetups. Let’s meet, chat and share! There is also some fancy Artbees and Jupiter X swag waiting for you in our booth.

wordcamp europe 2019 - Meet Artbees Team

Enter our exclusive AirPods giveaway!

wordcamp europe 2019 AirPod giveaway

We’re raffling off a FREE set of AirPods to any participant who tweets a photo taken in our booth. Stop by our booth at WordCamp 2019 on June 21 & 22 to learn more! You can find more info on the participation process on our exclusive WCEU page.

Do follow our coverage of WCEU 2019

Do follow the #WCEU hashtag and our channels on social media for special coverage of WordCamp Europe 2019 from Wednesday, June 18 to Saturday, June 22. We will cover different sections of the event, including Matt’s keynote, expert talks, the Jupiter X booth as well as the side meetups and events.

Have a great weekend, and we’re looking forward to meeting all of you guys at WCEU 2019 this year 😉

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Quickly Create a Landing Page Using Custom Blocks in Jupiter X

Elementor is an extremely powerful page builder. Among all its features, the ability to manage and create a landing page with custom blocks is quite handy. It allows you to build different parts of a website, then combine them into a page.

What is a custom block?

A custom block is similar to a piece of a puzzle or a brick of the wall. A landing page or complete website has several sections like a header, footer, hero, slider, testimonial, form, and so on. With the custom block feature, you can create each section separately and use each in any site or web page.

What are the benefits of a custom block?

  • Ability to use readymade block templates.
  • Creating a custom block once, then using it on several web pages or websites.
  • Ability to export/import the custom blocks.
  • Increasing the speed of creating a web page.

How to Create Custom Blocks

By using Elementor with the Jupiter X theme, you’ll be able to create different types of custom blocks: Page, Section, Header, Footer. With these types, you can create various custom blocks for any web page.

To create a custom block, follow the steps below:

1. From the left sidebar of the admin page, click on Elementor > Templates > Add New

Create a Landing Page Using Custom Blocks 1

2. Select the type of custom block, then enter a template name and click on the Create Template button.

3. In Elementor editor, add a new Section then add a widget.

4. There are two methods to save the custom block.
1). Right-click on the section button, then click on Save as Template.

2). Right-click on the Save Options button then click on Save as Template.

How to Export/Import Custom Blocks

Another valuable feature in Elementor, particularly when it comes to creating a landing page using custom blocks, is exporting/importing. With this feature, you can easily create custom blocks and export them. Also, you can import custom blocks that have been created by other people.

Exporting a custom block

There are two methods to export a custom block.

1. Go to Elementor > Templates > Saved Templates then click on the Export Template button.

2. In the Elementor editor, click on the Add Template button then click on the Export button in the Library popup.

Importing a custom block

To import a custom block from your computer, click on Elementor > Template on the left sidebar of the admin page. Then in a new window, click on Import Templates and choose your file to upload it.

How to Create a Landing Page Using Custom Blocks

A landing page (a.k.a static page, lander, lead capture page) is a standalone page that shows all the important content of any website on a single web page.

Creating a Header Block

The Header block is one of the moment sections on each website. In this case, it contains brand and social icons.

  1. Create a Template and set the type to Header.
  2. Add a new Section with two columns.
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Law <span style”color: rgb(248, 88, 88)”>.</span>
    • On the Style tab, set color to #000000
  4. Add a Social Icon element the set following settings.
    • On the Content tab, create 4 icons as: Facebook, Twitter, Google+, WordPress
    • Also set Shape to circle and Alignment to Right.

Creating a Hero Block

The Hero block is one of the most important elements when you create a landing page using custom blocks as it represents the leading message and the product promoted by your website. In this case, it contains two headings and a call-to-action button.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section then set the following settings.
    • On the Layout tab, set Height to Fit to Screen and Column Position to Middle
    • On the Style tab, set Background Color to #565656
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Expert Legal Solution, Alignment to Center
    • On the Style tab, set Color to #ffffff
  4. Right-click on the first Heading element, click on Duplicate, and then set the following settings.
    • On the Content tab, set Title to Defend Your Constitutional Right with Legal Help
  5. Duplicate the previous heading then set Title to Business Law
  6. Add Button then set following settings.
    • On the Content tab, set Text to Make An Appointment, Alignment to Center
    • On the Style tab, set Background color to #f85858, Border Radius to 28px
    • On the Style tab > Typography set Size to 18px, Weight to 300, Letter Spacing to 2.1
    • On the Advanced tab, set margin-top to 5%

Creating a Stats Block

Stats block is a section that allows you to input information and the statistics of your operations, followers, subscribers, delivered projects, among other data points. Typically, a web designer uses a counter, progress bar, and chart.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section with one column then set the following settings.
    • On the Layout tab, set the Height setting to Min Height equal to 400.
    • On the Style tab, set the Background color to #efefef
  3. Add an Icon element then set the following settings.
    • On the Content tab, set Icon setting to user-o
    • On the Style tab, set Color to #f74242, Size to 60, and Alignment to Center
    • On the Advanced tab, set margin-top to 15px
  4. Add a Counter element then set the following settings.
    • On the Content tab, set Starting Number to 0, Ending Number to 27539, Animation Duration to 2000, Title to Satisfied Clients
    • On the Style tab > Number section, set the Text color to #000000, in Typography set: Size to 45, weight to 200, Line-Height to 1.6 EM
    • On the Style tab > Title section, set the Text color to rgb(0,0,0,0.36), in Typography set Line-Height to 4 EM
  5. Duplicate the first column three times, then set different icons and titles as explained before.

Creating an About Us Block

In web design, the aim of the About Us section is to introduce your team, experience, expertise, operations, services, and to briefly answer questions like: “who are we?” and “what do we do?”.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section with two columns then set the following settings.
    • On the Layout tab, set Content Width to Full Width
  3. Edit the left Column then set the following settings.
    • On the Style tab, set Background Image to this image. Since you can’t see the background image, you need to add an element like Spacer element to the left column.
  4. Edit the right Column then set the following settings.
    • On the Style tab, set the Background color to #665e5c
    • On the Advanced tab, set Padding top to 27 and Padding bottom to 24
  5. Add an Inner Section element to the right column.
    • On the Layout tab, set Minimum Height to 450px.
  6. Add a Heading element then set the following setting.
    • On the Content tab, set Title to Why Choose Us?
    • On the Style tab > Typography, set the weight to 300
    • On the Advanced tab, set margin-top to 25
  7. Add a Text Editor element then set the following setting.
    • On the Style tab > Typography, set Line-Height to 1.6EM
    • On the Advanced tab, set margin-top to 5
  8. Add a Progress Bar element then set the following setting.
    • On the Content tab, remove Title, set Inner setting to Adoption Law, Percentage to 50
    • On the Advanced tab, set margin-top to 50
  9. Duplicate the previous Progress Bar then set the different settings as explained above.

Creating a Contact Us Block

The Contact Us section allows your visitors to view your business contact info. It’s also quite common to add a contact form to this section for easier communication.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section then set the following settings.
    • On the Layout tab, set Minimum Height to 500
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Contact Us, Alignment to Center
    • On the Style tab, set color to rgb(0,0,0,0.84), in Typography, set size to 47px
    • On the Advanced tab, set margin-top to 95px, margin-bottom 100px.
  4. Add an Inner Section element with two columns.
  5. In the left Column, add an Icon list element then set the following settings.
    • On the Content tab, create 4 items then set proper settings like Text to 198 West 21th Street, Suite 721 New York NY 10016, Icon to location-narrow. Repeat the same steps for other items with different settings.
    • On the Style tab > List, set Space between to 25, Divider to On, Style to solid, weight to 1
    • On the Style tab > Icon, set Color to #dd290d, size to 14
    • On the Style tab > Text, set Color to #9b2f14
  6. In right Column, add a Form element then set the following settings.
    • On the Content tab > Form Fields, create 3 fields then set the settings like Type to Text, Label to Name, Placeholder to Name, Column-width to 100%. Repeat the same steps for other items with different settings.
    • On the Content tab > Submit Button, set Text to Send, Icon to Send
    • On the Style tab > General, set column-spacing to 7, Row-spacing to 7
    • On the Style tab > Button, set Text color to #ededed, background color to #e8241e

Creating a Testimonials Block

The Testimonials Section showcases user feedback about your products.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section then set the following settings.
    • On the Layout tab, set Height to Fit to screen
    • On the Style tab, set Background Color to #efefef
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Testimonials, Alignment to Center.
    • On the Style tab, set Color to rgb(0,0,0,0.84),
    • On the Style tab > Typography, set Size to 45px, Weight to 300
    • On the Advanced tab, set margin-bottom to 75px
  4. Add a Testimonials element then set the following settings.
    • On the Content tab > Settings, set Slides to show to 1, Effect to slide, Animation speed to 5000, Show Dot Navigation to yes
    • On the Content tab > Items, add 3 items and set favorite data to Image, Comment, Name, Date.

Creating a Footer Block

The Footer Section normally contains small widgets that provide information about the website. It may also contain other widgets for additional information.

  1. Create a Template and set the type of it to Footer.
  2. Add a new Section with one column then set the following settings.
    • On the Style tab, set Background Color to #ffffff
    • On the Advanced tab, set Padding-top to 40, Padding-bottom to 20
  3. Add an Inner section element with 3 columns.
  4. Add a Heading element for the first column then set the following settings.
    • On the Content tab, set Title to Attorney’s Law, Alignment to left
    • On the Style tab, set color to #515151, in Typography, set the size to 24px, weight to 300
    • On the Advanced tab, set margin-top to 10px, margin-bottom 33px
  5. Add a Text Editor element in the left column then set your favorite text.
  6. Duplicate the Heading element in the first column and add it to the second column and set Title to Opening Hours and Alignment to center.
  7. Add an Icon List element then set the following settings.
    • On the Content tab, create 3 items then set settings like Text to Mon – Thu: 9:00 – 21 00. Repeat the same steps for other items with different settings.
    • On the style tab, set Space Between to 8, Alignment to center
  8. Duplicate the Heading element in the first column, add it to the third column, and set Title to Contact Information and Alignment to center.
  9. Add an Icon List element then set the following settings.
    • On the Content tab, create 3 items, then set the settings like Text to 198 West 21th Street, Suite 721 New York, Icon to Address-Book. Repeat the same steps for the other items with different settings.
  10. Add a Heading element then set the following settings.
    • On the Content tab, set Title to © 2019 Free HTML5. All Rights Reserved. Designed by FreeHTML5.co Demo Images: Unsplash, Alignment to Left.
    • On the Style tab, set Color to #545454, in Typography, set Size to 16px, Weight to 400

Combining all Blocks

After creating the necessary blocks, let’s combine them to create the final page.

1. Create a new Page from the left sidebar of the admin page.

2. In the new page, set the Template to Elementor Canvas from Page Attributes. Update the page and click on the Edit with Elementor button.

3. In the Elementor editor, click on the Add Template button.

4. In the Library popup, click on the My Templates tab. In this tab, you can see your custom blocks (imported or created). Finally, click on insert.

5. Add the templates in the following order: Header, Hero, Status, About Us, Contact Us, Testimonials, Footer.

Note: After adding each custom block (template), the layout of the page may reset. To assign the correct layout, click on the Settings button and choose the proper layout.

Conclusion

In this article, we showed you how to create a landing page with custom blocks in Jupiter X. We further explained the process of building custom blocks from scratch. But don’t worry – if you need readymade custom blocks, you can check out Jupiter X readymade blocks.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Create a Job board in WordPress using Jupiter X

One of the important things in any person’s life is his or her job. A good career provides structure and gives one’s life direction. Therefore, finding the right job is essential. Nowadays, one way to find a job is by using a job board website.

What is a job board website?

A job board (a.k.a job site, job portal, employment site) is a website or webpage that deals particularly with employment, job seekers, and resumes. It enables employers to offer job positions to potential candidates. Applicants can search job boards to find open positions and career opportunities.

There are different types of job board websites over the internet:

Additionally, there are job search engines. The main difference between a job board website and a job search engine is that job seekers only see job offers on one site but on the job search engine, the applicants can access job offers from several job board websites or employers’ career websites.

In this article, we’re going to create a job board in WordPress using the Jupiter X theme and WP Job Manager plugin. In case you want to use a different plugin, the following list can help you.

WP Job Manager WordPress Plugin

Create a job board in wordpress plugin

WP Job Manager is a simple, lightweight and shortcode-based plugin that will help you create a job board in WordPress. It allows you to create jobs, job categories, frontend job submission forms and job dashboards for users.

Features

  • Add, manage and categorize job listings using the familiar WordPress UI.
  • Searchable and filterable ajax-powered job listings are added to your pages via shortcodes.
  • Frontend forms for guests and registered users to submit and manage job listings.
  • Allow employers or recruiters to preview their listing before it goes live. The preview matches the appearance of a live job listing.
  • Each listing can be tied to an email or website address so that job seekers can apply seamlessly.
  • Searches also display RSS links to allow job seekers to be alerted to new jobs matching their search.
  • Allow logged in employers to view, edit, mark as filled, or delete their active job listings.
  • Create three default pages as Jobs, Job Dashboard, Post a Job.

Useful Shortcodes

The plugin comes with several shortcodes to show jobs and forms in various formats. You can learn more about the following shortcodes in this shortcode reference article.

  • [jobs]: Shows a list of your jobs as well as filters for searching.
  • [job]: Shows a single job by ID.
  • [job_summary]: Shows a single job’s summary by ID.
  • [submit_job_form]: Shows the frontend job submission form.
  • [job_dashboard]: Shows the job dashboard used by logged in users.

Create a Job Board in WordPress with WP Job Manager Plugin

Now that we have learned about the WP Job Manager plugin, let’s create a website using this plugin and your Jupiter X theme.

Create a Job Board in WordPress screenshot 1

Creating Job Categories

Categories provide a clear structure to websites. It helps visitors to easily find all jobs within a specific industry or field of expertise.

For creating categories, go to Job Listing > Add Categories, then create the following categories:

Web Development, Web Design, Marketing, Accounting, Customer Support, Illustrations, Writing, Photography, Video Production.

Create a Job Board in WordPress Screenshot 2

Creating Jobs

For the purpose of this article, let’s create some jobs so you can configure the plugin properly.

1. Go to Job Listing > Add New, then create some jobs and set proper values as shown below.

Create a Job Board in WordPress Screenshot 3

2. After creating the jobs, it’s time to configure the settings in Job Listing > Settings

3. In the Job Listing tab, set the following settings.

Create a job board in WordPress Screenshot 4

4. In the Pages tab, set the following settings:

  • Submit job Form Page: Post a Job (automatically created via the plugin)
  • Job Dashboard Page: Job Dashboard (automatically created via the plugin)
  • Job Listing Page: Home (Will be explained in the next section)
Create a job board in WordPress Screenshot 5

Creating a Home Page

1. Create a new page from Pages > Add New. Set the following settings, then edit the page with Elementor.

  • Title: Home
  • Template: Full Width
Create a job board in WordPress Screenshot 6

2. Add a new section. Set Padding as shown below:

Create a job board in WordPress Screenshot 7

3. Set the Background settings as shown below. You can download the image from Unsplash for free.

Create a job board in WordPress Screenshot 8

4. Set Background Overlay settings as shown below:

  • Color: #000019
  • Opacity: 0.89
Create a job board in WordPress Screenshot 9

5. Add a Heading element then set the following settings:

  • Title: Hire a talent to do the impossible
  • Size: XL
Create a job board in WordPress Screenshot 10

6. Add a Text Editor element. Set line-Height to 0.8 and text to:

  • Compellingly utilize value-added sources vis-a-vis client.
  • Centric process improvements. Distinctively negotiate impactful leadership skills.

7. Add a Text Editor element. Set text to:

  • Trending searches: Creative Designer, Remote Developer, Writer

8. Add a Shortcode element then set it to [jobs].

Create a job board in WordPress Screenshot 11

9. In the end, go to Appearance > Customize > Homepage Settings

  • Set your homepage displays to A static page
  • Set homepage to Home
Create a job board in WordPress Screenshot 12

Creating Category Pages

For each category, let’s create a specific page so users can find all jobs under that category in one page.

1. Create a new page. Set the Title to Accounting then add Shortcode block with [jobs categories=”accounting”] content.

Create a job board in WordPress Screenshot 13

2. Create the following pages similar to the previous step with the following settings.

  • Set Title to Customer Support and add Shortcode block with [jobs categories=”customer-support”] content.
  • Set Title to Web Development and add Shortcode block with [jobs categories=”web-development”] content.
  • Set Title to Web Development and add Shortcode block with [jobs categories=”web-development”] content.
  • Set Title to Web Design and add Shortcode block with [jobs categories=”web-design”] content.
  • Set Title to Marketing and add Shortcode block with [jobs categories=”marketing”] content.
  • Set Title to Illustrations and add Shortcode block with [jobs categories=”illustrations”] content.
  • Set Title to Writing and add Shortcode block with [jobs categories=”writing”] content.
  • Set Title to Photography and add Shortcode block with [jobs categories=”photography”] content.
  • Set Title to Video Production and add Shortcode block with [jobs categories=”video-production”] content.

Creating Menus

When you create a job board in WordPress, you also need to create two menus as explained below.

1. Go to Appearance > Menus

2. Create a new menu, then follow the below steps:

  • Set Name to Primary.
  • Add How It Works (page, link, …) and Job Dashboard pages to your menu.
  • Save the menu.
Create a job board in WordPress Screenshot 14

3. Create another new menu, then follow the below steps:

  • Set the Name to Secondary.
  • Add all the category pages you created before.
Create a job board in WordPress Screenshot 15

Creating a Header

In job board websites, it’s very helpful to create a header with the necessary links like categories, submit a form, etc.

1. In the admin page, go to Appearance > Customize > Site Identity. Add your logo in Site Logo.

2. Go to Header. In the Settings tab, select the custom type and click on the New button.

3. In the popup, add a New Section.

4. Add Site logo Element to section.

  • On the Content tab, set Choose logo to Primary.
  • On the Style tab, set Max Width to 75%.

5. Add Flex Spacer element after Site Logo in the Section.
6. Add Navigation Menu element to the section. Set the menu option to Primary.

7. Add a Button element. In the Content tab:

  • Set Text to Post a Job
  • Set Link to Post a Job page

In the Style tab:

  • Set background color to #503bff.
  • Set Border Radius to 2.
  • Set Padding Top/bottom to 9 and Padding Right/Left to 15.

8. Add a new Section. In the Style tab, set Background Color to #f8f9fa.

9. Add a Navigation Menu element in the section.

  • In the Content tab, set Menu option to Secondary.
  • In the Style tab, set the following settings.

Creating Footer

1. In the admin page, go to Appearance > Customize > Footer.

2. In the Settings tab, choose Custom type and click on the New button.

3. Click on the Add Template button.

4. Choose the following block from the list of ready-made templates, then click on the Insert button.

5. Edit the Section, set Background Color to #000116.
6. Change the Heading to Hire a talent like a pro!
7. Delete the Get Started and Features columns.
8. Replace Company column items with About, Investors, Terms of Use, Privacy Policy, Contact us.
9. Add a new column then add the Recent Jobs widget. On the content tab, set Number of listings to show up to 3 posts.

Improve Default Styling

The WP Job Manager plugin has some basic styling to help you effectively create a job board in WordPress. You can improve the styling by adding the following CSS in Appearance > Customize > Additional CSS.

/* Job board filter */
.job_filters {
 margin: 2rem 0 2rem;
 border: 1px solid #e5e7e8;
 background-color: transparent;
border-radius: 4px;
overflow: hidden;
}

.job_filters input[type=text],
.job-manager-form input[type=text] {
 display: block;
 width: 100%;
 padding: .375rem .75rem;
 font-size: 1rem;
 line-height: 1.5;
 color: #495057;
 background-color: #fff;
 background-clip: padding-box;
 border: 1px solid #ced4da;
 border-radius: 4px;
}

.job_filters .select2-container--default .select2-selection--single {
 height: 38px;
border: 1px solid #ced4da;
}

.job_filters .select2-container--default .select2-selection--single .select2-selection__rendered {
 line-height: 36px;
}

.job_filters .select2-container--default .select2-selection--single .select2-selection__arrow {
 height: 36px;
right: 5px;
}

.job_filters .search_location {
 margin-bottom: .5rem;
}

.job_filters .job_types li {
padding: .7rem 1rem;
}

.job_filters .job_types li label {
margin-bottom: 0;
}

/* Job single */
.single-job_listing .jupiterx-post-author-box,
.single-job_listing .jupiterx-post-image{
display: none;
}

/* Job recent widget */
.jupiterx-widget ul.job_listings {
border-width: 0;
}

.jupiterx-widget ul.job_listings li.job_listing {
border-width: 0;
margin-bottom: 10px;
}

.jupiterx-widget ul.job_listings li.job_listing:hover a {
background-color: transparent;
}

.jupiterx-widget ul.job_listings li.job_listing a {
color: #fff;
padding: 0;
font-size: 1rem;
}

.jupiterx-widget ul.job_listings li.job_listing a div.position {
padding: 0;
float: none;
}

.jupiterx-widget ul.job_listings li.job_listing a ul.meta {
padding: 0;
float: none;
text-align: left;
display: flex;
width: 100%;
}

.jupiterx-widget ul.job_listings li.job_listing a ul.meta li {
margin-right: 10px;
}

Conclusion

In this article, we showed you how to create a job board in WordPress with the WP Job Manager plugin and your Jupiter X theme.

There are some other plugins in the WordPress Community that you can try. Feel free to share your favorite one with us in the comments section below!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Jupiter X v1.3 Is Out! Supercharge Your Forms With These New Features!

A couple of days ago Jupiter X v1.3 was released. Of course, just like any other theme updates, it comes with a long list of improvements and additions to make the theme even more powerful and capable. But looking at the features, you will notice that this update has particularly improved on one feature! Yes, that’s the form element.

Form builders are among those parts of WordPress themes that are basically the same without much difference in various themes and you don’t expect to see anything about them in theme updates. Well, Jupiter X surprises us again with this update!

Jupiter X form builder is already a powerful tool to visually create and order your online forms.  It also allows you to customize its appearance to the deepest level. So, let’s see what can possibly be an improvement coming with the latest update, Jupiter X v1.3!

New form elements added

As the title also suggests, you will have more elements to use in your forms including checkbox, radio button, date selector and time selector. Date and time selector will open standard date and time selectors for your users to set a time or date.

For checkbox and radio buttons, add the choices one per line and see them listed down.

Say hi to download action

This action helps you upload a file to get downloaded when the submit button is clicked by the user; say, the PDF book you give away in return for new subscribers or a freebie design file in exchange for some valuable leads! There are 2 ways to link a “file” to “download” action:

  1. Via source file link
  2. By uploading the package directly to your hosting service

Hubspot integration

If you‘re using HubSpot to collect leads and you don’t want to use one of the forms from its built-in library, you can simply connect your Jupiter X form to Hubspot. You can enter your HubSpot account details such as Portal ID and Form ID, and the data your form collects will be sent in defined HubSpot table fields. You should do the field mapping here to choose what field will be connected to which HubSpot fields.

Deeper MailChimp integration

Jupiter has offered MailChimp integration from its very early versions, but with the latest Jupiter X v1.3 form builder updates, you will have tighter integration with MailChimp in your forms. Just by entering your MailChimp API key, you can connect your form to any specific audience list you have in Mailchimp and the emails you collect in your form will be added to that audience segment.

If your audience is segmented into groups, you can choose a group so the collected emails will be directly added to that group. Furthermore, you can activate the double opt-in feature for your entries directly from Jupiter X instead of doing it from MailChimp.

Just like the Hubspot integration, you can perform field mapping to indicate the exact MailChimp fields you want each of your form fields to be connected to.

Recap

How do you like the new additions to Jupiter X v1.3 form builder? Go ahead and build your next online form with it and let us know if there is anything you expect from a form builder that Jupiter X v1.3 form builder hasn’t yet provided. And stay tuned for more and more new features and additions coming your way very soon!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Artbees Takeaways from WordCamp London 2019 and WordCamp Torino 2019

Spring is maybe the best season to run WordCamps. In fact, if you check WordCamp Central, you will notice that many WordCamps are scheduled for the spring season. Just to name a few, Paris, Vienna, Atlanta, London, Torino, Athens, Rotterdam, Madrid, Miami, Kolkata, and Prague have all held or scheduled WordCamps for March, April, and May.

Artbees started our WordCamp tours in 2019 with two important European WordCamps, WordCamp London 2019 and WordCamp Torino 2019. We participated in one as a speaker and in the other as a sponsor. Below I will share some of our takeaways from these two WordCamps. Let’s dig in.

WordCamp Torino 2019

Just a few months after our last WordCamp in Milano, we got to join another WordCamp with the great Italian WordPress community — WordCamp Torino 2019. The city of Torino is as beautiful as Milan but less expensive. It was, in fact, cheaper compared to many other EU cities.

Torino is one of the tech and industrial hubs of Italy. Communicating with people as a foreigner, of course, is challenging, but Italians are famous for their upbeat mood and hospitality. This all does not only make the city a great destination for tourists but also a great place for WordCamps.

Upon arrival, you can observe the high engagement of locals who are passionate about contributing to WordPress. WordCamp Torino 2019 was very well-organized and planned, too. Food was nothing less than what you could expect from a country like Italy —always savory and delicious!

WordCamp Torino Contributor Day

Like every other WordCamp Artbees has attended, we had a member in WordCamp Torino 2019 as well. Rouzbeh from Artbees contributed to the Marketing team in WordCamp Torino  (Contribution day in Italian WordCamps are not a placeholder!).

WordCamp Torino 2019 Contributor Day

People seriously work and contribute during this segment and the progress is visible and even palpable. You can see heated discussions and meetings going on during the entire contribution day.

Rouzbeh from Artbees Talked About GPL

At WordCamp Torino, Rouzbeh, CEO at Artbees, discussed a very sensitive and nowadays popular matter: open-source. Within his talk entitled, “Going GPL: What happens when a theme with 100K users goes GPL!”, he shared the story of Jupiter X WordPress theme with 100K customers that decided to change its license to full GPL after 5 years.

As the CEO of Artbees, he explained how he had to be aware of the business implications and risks attached to such a decision. Before making this decision at Artbees, they were very much concerned about the impact this will have on sales, the Jupiter X brand image, and the future of the theme as a whole.

After a short introduction of GPL license and its meaning, he explained the results of this decision, the steps taken to execute the relicensing process, the market’s reaction to it, and finally, the state of the company and our theme after going GPL.

Rouzbeh’s presentation of the Artbees journey towards GPL was worth it for all the WordPress theme producers who are unsure about going GPL. It can also encourage many theme developers to follow the same path. The video of the talk will be available in wordpress.tv soon.

Credits: Artbees CEO, Rouzbeh Firouzmand presented his talk ‘Going GPL: What happens when a theme with 100K users goes GPL!’ in WordCamp Torino 2019

Francesca Marano of WordCamp Torino made a great point regarding Rouzbeh’s talk:

You can not encourage people to contribute to open source for free just as a good gesture or a positive deed. You should show them the real benefit they can get out of it or perhaps a potential opportunity from a business outlook.

Based on the extremely positive feedback regarding Rouzbeh’s talk, you can say that his topic was aligned with what Francesca said as it definitely was trying to explore the business potential of GPL.  

WordCamp London 2019

Just about the same time that WordCamp Torino was taking place, there was another great WordCamp happening exactly 1240 KM away! WordCamp London 2019 was held on April 5-7 in London Metropolitan University, and Artbees was one of its sponsors. Fun fact: This was the first WordCamp that Artbees sponsored in 2019.

Artbees supported WordCamp London 2019 with its Jupiter X

WordCamp London is one of the most important WordCamps in Europe. Some believe that’s the second most important WordCamp (after WordCamp Europe) in Europe and a great opportunity to obtain the pulse of the WordPress community in entire Europe, as there are attendees from every part of Europe, and not just the UK.

I, Maziar, and Babek were representing Artbees’ very own Jupiter X in its booth on April 6 and 7. Rouzbeh was only able to join us on April 7 Sunday after he held his talk in Torino!

WordCamp London Contributor Day

As you may know, Contributor Days are an integral part of WordCamps and truly symbolize the culture that WordPress promotes. Tens, sometimes dozens, and sometimes hundreds of passionate people gather in different teams in every WordCamp and contribute to WordPress however they can (I have co-authored a blog post about the culture of contribution in WordPress in WordPress.org Marketing blog and talked about this in extent).

Maziar from Artbees in WordCamp London 2019 Contributor Day along with MakeWordPress marketing team

Artbees had a representative in WordCamp London 2019 Contributor Day as well! As part of the MakeWordPress Marketing team and along with other great members and reps such as Siobhan Cunningham and Yvette Sonneveld, we worked on different tasks related to the Marketing team. I personally wrote a WordPress success case study you will read soon on wordpress.org Marketing blog.

A Vibrant Talk Lineup!

WordCamp London had a vibrant array of speakers talking about a wide variety of topics such as copywriting, business growth, content monetization, accessibility, content syndication, open-source, SEO, cognitive design, cookies, recruiting, e-commerce and technical topics such as HTTP/2, GraphQL, Laravel, Serverless, Redux, and more.

Below, I want to name a few very interesting talks you might have missed! In which case, do not forget to watch them once they are on wordpress.tv:

Yvette Sonneveld

Sales Funnel = Sausage Maker?

Francesca Marano

Websites For Freelancers 101

Miriam Schwab

JAMstack and WordPress: Friends or Foes?

Raffaella Isidori

Mindful Design: Designing with Presence for Purpose and Inclusion

Sabrina Zeidan

5 Steps to a Faster Website and Higher Google Rankings

Ronald Gijsel

Are You Ready To Publish? – The Afterlife…

Rian Rietveld

Accessibility Testing for Content Managers Workshop

Andrea Zoellner

Effective Copywriting Tips for Better UX

Tess Coughlan-Alenn

Using WordPress To DO_ACTION

Felix Arntz

Introduction to Web Components

Josepha Haden Chomphosy

Fireside Chat: Building a Culture of Safety

Pascal Birchler

An Introduction to WP-CLI

Topher Derosia

5 eCommerce Trends to Implement Now

Jupiter X in WordCamp London

During the days of manning our booth as a sponsor of WordCamp London 2019 (April 6 & 7), we witnessed a very dynamic range of people stopping by to ask about Jupiter X. We received a lot of good insights and feedback about Jupiter X and a round of applause for our decision to go GPL! We also happened to meet some of the old Jupiter users in London who had been using Jupiter since 4 years ago.

Jupiter X Booth in WordCamp London 2019

As you can deduce, Jupiter X had a booth in WordCamp London 2019. So, I had a limited time attending talks or side events. However, I was lucky enough to manage my time to attend important events such as a very useful meetup regarding marketing that was held by  MakeWordPress marketing team.

I joined a side meetup regarding marketing as part of the MakeWordPress Marketing team

In this one-hour meeting, many ideas, trends, and practices regarding marketing were discussed and many questions were answered. I myself discussed the relevancy of testimonials in 2019 and received different ideas about that!

This was our first WordCamp London experience and for sure, not the last one. WordCamp London 2019 was organized by a veteran team (Led by Dan Maby) with many volunteers contributing to it in different sectors. WordCamp London gives everyone who does something with WordPress a unique chance to connect with the UK WordPress community and explore various opportunities.

WordCamp Torino 2019 and WordCamp London 2019 were a great kickstarter for Artbees’ WordCamp presence in 2019. The experience we collected in different parts of these great WordPress gatherings, from contributing to different teams to speaking with them to showcase Jupiter X is priceless and will definitely help us with the future of Artbees and Jupiter X.

However, that’s just the beginning for 2019! Stay tuned with us for great news with upcoming WordCamps such as WordCamp Athens 2019, WordCamp Plovdiv 2019, WordCamp Europe 2019, and more. 😀

Have you ever been to any WordCamp? Do share your experience with us and the Artbees community below!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Now you are able to Create & Edit Custom Header and Footer right from inside Customizer!

Web designers who are into advanced customization know that one of the important parts of a WordPress theme is its ability to create and edit custom header and footer.

The powerful Jupiter X header and footer customizer already allow you to create and edit custom header and footer, but it involved a little back and forth navigation from the backend and frontend. We recently made the whole process a lot easier for you.

Before the new feature was added, you had to create a template first, open the customizer, chose the template for your header or footer, and then go back to Customizer to select and set that header or footer template as your global header or footer. Whew!

With the new feature, the entire process will be within the customizer itself, without the need to go to your WordPress dashboard!

How to Create and Edit Custom Header and Footer from your Jupiter X Customizer

1- Open Customizer WordPress Admin > Appearance > Customizer

2- In Customizer, go to the Header section

There are now two new buttons next to the selected template: ‘Edit’ and ‘New’.

If you want to create a new header from the ground up, you can click on ‘New’ button and you will be quickly taken to the header/footer builder area where you can simply build a header or footer using Elementor, just like a regular page.

On the other hand, the ‘Edit’ button will let you use an existing template and edit the template that you currently selected. You can repeat the same process for your footer by going to the footer section of the Customizer.

Use this method only to create and edit global custom headers and footers. In order to create page-specific headers and footers, select a template from the page meta option > Header tab.

I hope this has eased up the header and footer customization for you! Stay tuned for more improvements and new features in our future updates.

Here’s a video with more info on how to create and edit custom header and footer.

Follow Jupiter X on Twitter to get the latest updates, news, and exclusives.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Create a Guest Post Submission in WordPress

The purpose of creating a website is to introduce our business and services to reach more potential customers. In fact, the visitors to a website are the real asset of any website and one of the important factors of any good website is content. By having awesome content, you can:

  • Provide proper information about your products/services
  • Increase your ranking in search engines like Google
  • Engage visitors and convert them to customers

Creating content for a website requires lots of time and resources. With the right guest post submission technique, you can reduce your expenses and allow visitors to contribute and improve the contents of your website.

What does Guest Post Submission in WordPress Mean?

Guest post submissions, also referred to as frontend post or posting without logging in, is a technique that allows visitors to express their ideas, suggestions, tips, reviews, and ideas for your website. Using this technique, you can better engage customers on your website and allow them to help you scale your website.

There are several plugins available to help you do this. You can use one of the following plugins to create a guest post submission in WordPress:

In this article, we use AccessPress Anonymous Post for creating guest post submission in WordPress.

AccessPress Anonymous Post

This plugin is a responsive HTML5 form that allows your website users (guests/visitors/not logged in users) to submit a Standard WordPress Post and featured image in an easy and customized way.

There are two methods for creating a guest post submission form in the frontend.

  • Usage of [ap-form] shortcode.
  • Usage of < ?php echo do_shortcode( ‘[ap-form]’ );? > in a template file.

Features:

  • Submit post from frontend as a non-logged-in user or as a logged user
  • The user can customize settings
  • Category selection
  • Field selection ability
  • Mathematical captcha and Google captcha
  • Add one or more featured images to the post.
  • Add other media if the user is logged in
  • Required field selection ability
  • Email notification to admin after successful post submission
  • Using shortcode to display post submission anywhere
  • Admin will be able to review and approve the submitted post
  • HTML5 form with CSS style
  • Author’s name, author’s URL, and email will be added as a custom field
  • Option to assign a post to a specific category or let users choose a category from the frontend
  • Online support

How to Create a Guest Post Submission in WordPress Using AccessPress Anonymous Post

1. After installing and activating the plugin, you can see AccessPress Anonymous Post menu in the left sidebar of the dashboard.

2. Click on the AccessPress Anonymous Post menu to go to the settings screen.

3. In the General Settings tab, set the following settings:

Form Title: (empty because your page has a title by default)
Post-Publish Status: Draft (if we want the admin to approve the post)
Post Submission Message: Your Post was Submitted Successfully

4. In the Form Settings tab, choose the following settings:

  • Post Title: Check Show on Form and Required checkboxes.
  • Post Content: Check Show on Form and Required checkboxes.
  • Post Image: Check Show on Form checkbox.

5. In the Captcha settings tab, set the following settings, then click on the Save All Changes button.

  • Captcha Type: Mathematical Captcha
  • Captcha Label: Human Test
  • Captcha Error Message: Your answer is Incorrect.

6. Create a new page from Pages > Add New and below steps:

  • Set Title to Guest Post
  • Add Shortcode Block
  • Set the value to [ap-form]
  • Click on the Publish Button

7. Add your page to your website’s menu from Appearance > Menus.

8. Go to Guest Post page.

9. In this page, you can see the guest post submission form.

10. As you can see, the form fields have basic styling. You can add custom CSS from Customizer > Additional CSS section.

/* Fields spacing */
.ap-form-field-wrapper {
   margin-bottom: 20px;
}

/* Text fields */
.ap-form-field input[type=text] {
    padding: 10px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

/* Focus state of text fields */
.ap-form-field input[type=text]:focus {
    outline-width: 0;
}

/* Submit button */
.ap-form-submit-button {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    border: 1px solid #0000;
    padding: 5px 13px;
    border-radius: 4px;
    color: #fff;
    background: #007bff;
    border-color: #007bff;
}

11. If a visitor submits a guest post successfully, he or she will see the value of Post Submission Message setting above the form.

12. The submitted posts are saved in your website’s database. You can see them on the dashboard as draft posts in Posts > All Posts.

Note: If you want users to publish their posts without admin approval, you can set Post Publish Status setting to Publish in the General Settings tab.

Conclusion

In this article, you learned how to create a guest post submission in WordPress with AccessPress Anonymous Post plugin. Additionally, you learned how to configure settings for the submission form.

AccessPress Anonymous Post plugin has many helpful settings to allow users to create a perfect guest post submission form. Feel free to share your experience with us about the usage of this or another plugin in the comments section.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Some Handy Elementor Plugins for Jupiter X

Elementor Plugins for Jupiter X featured image

Elementor page builder enables you to deliver high-end page designs with advanced capabilities, never before seen on WordPress. The standard and extendable nature of this plugin allow developers to create plugins to add new features to it.

Jupiter X theme is using Elementor as its default page builder. It’s also coded with standard practices so the Elementor community plugins are compatible with the theme. In this article, let’s cover some handy Elementor plugins for Jupiter X theme. The plugins are divided into two main categories:

  • Adding new widgets to Elementor
  • Extending functionalities of Elementor

Note: The compatibility of the plugins with Jupiter X theme have been tested at the time of writing this article.

HT Mega – Ultimate Addons for Elementor Page Builder

HT Mega extends Elementor with 80+ elements and 360 blocks with various styles. The live demo can show you the real usage of the elements.

Features:

  • Ability to enable/disable elements to improve performance
  • Unlimited Color and Typography options
  • Fully responsive and mobile ready
  • Cross Browser Compatible

Available Elements:

  • Team member
  • User login form
  • User register form
  • Litebox
  • Instagram
  • Twitter feed
  • Image magnifier
  • Etc.

Download here.

Premium Addons for Elementor

Premium Elementor add-ons and widgets with numerous customization options are available to extend the Elementor Page Builder capabilities and help you build impressive websites with no coding required. The live demo can show you the real usage of the elements.

Features:

  • 22+ Fully Customizable Elementor add-on widgets
  • Options panel for enabling desired widgets only for faster performance
  • Fully Responsive and Cross Browser Compatible

Available Elements:

  • Blog
  • Dual heading
  • Fancy text
  • Image separator
  • Counter
  • Modal box
  • Image button
  • And more.

Download here.

Image Hover Effects Add-on for Elementor

You can add 40+ Image hover effects with title and descriptions in a simple way, using this WordPress plugin image hover effects add-on for Elementor. The live demo can show you the real usage of the elements.

Features:

  • Easy to customize options
  • 40+ Image Hover Effects
  • Circle and Square border both come with all effects
  • Center the text horizontally
  • Control the spaces between elements

Effects:

  • Fade
  • Slide
  • Reveal
  • Push
  • Hinge
  • Flip
  • Shutter
  • Fold
  • Zoom
  • Blur

Download here.

Contact Form 7 Widget For Elementor Page Builder

This plugin adds a new element to Elementor Page Builder which helps you to easily drag and drop contact form 7 forms from a drop-down list. No need to go into your Contact Form 7 to copy the shortcode and add it to your Elementor widget anymore — simply drag and drop!

Features:

  • Add CSS directly from Elementor live preview to your contact form 7
  • Add any WordPress page as a thank you page directly from the Elementor edit screen when you add the VOID Contact Form 7 widget
  • Use single Contact Form 7 with different Style and redirect rule

Download here.

Toolbar Extras for Elementor – WordPress Admin Bar Enhanced

This plugin is a huge time saver. It enables you to have quick access to your site building resources. Using the Toolbar Extras plugin, you can add useful links to the top toolbar of your admin page and access links quickly to reduce scrolling and save time. Furthermore, with this plugin, you can access links when from the frontend.

Features:

Page Builder links: Elementor & Elementor Pro.
Links for Elementor Add-On Plugins.
Enhances the New Content section (under + New) with more links.
Support for creating an internal new Menu for Admins which hooks into the Toolbar.
Fully internationalized and translatable also for RTL language.

The main item has useful links.

This plugin enhances + New

Download here.

Custom Fonts

One of the important factors in typography is a good font. If you need to use your custom font in your website, you can use the Custom Fonts plugin. This plugin allows you to add a custom web font to Elementor font library.

Adding a Custom Font

1. To add your custom font, go to Appearance > Custom Fonts then upload your fonts. We downloaded Sonika and converted it to a web font using the Web font generator tool.

2. Use your custom font like other fonts. It’s added at the top of Fonts under Custom group.

Download here.

Custom Icons for Elementor

Elementor comes with Font Awesome icons by default and there’s no way to upload custom icons. But the Custom Icons for Elementor plugin enables you to add your custom icons to the built-in Elementor icon controls and elements.

How to Add Custom Icons

1. Select some icons in Fontello website, then download them.

2. Upload the downloaded zip file in Elementor > Custom Icons.

3. Use your custom icons.

Download here.

Elementor Blocks for Gutenberg

As you may know, Gutenberg is the default WordPress editor. But Elementor Blocks for Gutenberg allows you to easily insert any Elementor template into Gutenberg with just one click.  By using this plugin, you can benefit from both page builder features.

Add an Elementor Template in Gutenberg

1. Edit a page. Add Elementor Library block in the page, then select your template.  

2. You will see your Elementor template inside your Gutenberg page.

Download here.

Elementor Element Condition

This plugin gives you the ability to add conditions to sections and widgets so they can be shown or hidden. At the moment, it only supports two simple variables and one operator.

  • This plugin adds Condition section for all widgets in Style tab.
  • The Digital Solutions section will be only visible to logged in users based on the following condition.

Download here.

Make Column Clickable Elementor

This plugin adds a very handy and simple feature to the Elementor column. It allows you to make the whole column clickable.

This plugin adds a Custom Link setting in Column > Layout tab.

Download here.

Visibility Logic for Elementor

Hide or show an Elementor widget based on the user’s role. Based on your visibility setting for each widget, you can restrict rendering elements from the front-end, meaning that you can hide or show any Elementor widget based on the user role (Subscriber, Author, Administrator, etc), whether the user is Logged in or not.

This plugin adds a Visibility control section for all widgets in the Advanced tab with the following settings.

  • Enable conditions
  • Visible for
  • Hidden for

Download here.

Elementor Plugins for Jupiter X will make your life easier!

In this article, we introduced some handy Elementor plugins for Jupiter X. Some plugins add widgets, while some extend the functionality of Elementor page builder.

There are also some other plugins in the WordPress Community that you can try. Feel free to share your favorite one with us in the comments section!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Add Filters to WooCommerce and Custom Posts

Add filters to WooCommerce and Custom Posts Featured Image

Just imagine how an actual customer experience looks like in a retail store. Most people don’t know what exactly they want in the first place. They like to see collections of items and then evaluate their options by narrowing down their selection. This is the ultimate experience.

Why do you need to add filters to WooCommerce and Custom Posts?

If you’re running an online store or using custom post types, you need to make sure that your users are able to easily find what product or post they are looking for. Having a search field on your website is a great help, but not nearly enough.

Just imagine how an actual customer experience looks like in a retail store. Most people don’t know what exactly they want in the first place. They like to see collections of items and then evaluate their options by narrowing down their selection. This is the ultimate experience.

Now, you should ask yourself as an online store runner. Does your website have this capability? Do you let your customers play with their options and narrow down their preferences?

Booking.com has a huge database but it is easily searchable by humans with the help of filters

Jupiter X is not only giving you an easy-to-setup and fully customizable platform to sell your products on, but it also offers comprehensive Woocommerce features to amplify your customer’s shopping experience even further.

Jupiter X comes bundled with a plugin called JetSmartFilters so you can add filters to WooCommerce and custom posts. This tiny and powerful plugin uses powerful AJAX filters so your customer can find the right WooCommerce products and custom posts they’re looking for.

Who needs to add filters to WooCommerce and Custom Posts?

It’s a must for pretty much anyone running an e-commerce website or custom post types.

  1. Any online store based on Woocommerce
  2. Listing websites such as real estate, car rentals, etc.
  3. Websites with custom post types

Features

Speed

JetSmartFilters is created based on AJAX technology, which allows the filters to work without refreshing the page, making them even faster. So, users can work with options and filters seamlessly without having to refresh or reload the page.

7 Smart Filter Variations

There are several filter types you can choose from based on your need. Everything is built on Elementor, so you can easily modify, customize, and add filters to WooCommerce and custom posts.

9 Filters and Pagination Widgets

Further improve your visitor’s experience with these versatile filters and pagination widgets:

Highly customizable WooCommerce and Custom Post Filters

JetSmartFilters is built upon the Elementor plugin, therefore it is extremely customizable, just like any other Elementor widget. You can easily drag and drop the filter widgets to the page and start customizing their elements until it matches your desired style and theme. With Jupiter X, it’s that easy to add filters to WooCommerce and custom posts!  

Official plugin website

Documentation

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Best Plugins for WordPress Meta Box

wordpress meta box featured image

WordPress uses a powerful and flexible framework that has wonderful features to help users create a website easily and quickly. WordPress provides necessary features for creating and editing content, but perhaps for a lot of websites, we need to add more information or data. In this situation, WordPress provides a Meta Box feature.

What is a WordPress Meta Box?

WordPress Meta Box is a group of custom fields which allows you to add more information to posts, pages and custom posts types. You can add custom meta boxes via custom codes in your theme/plugin, or use one of the following plugins for easier and faster workflow.

In this article, let’s cover three of the most popular WordPress Meta Box plugins.

Create WordPress Meta Box with Advanced Custom Fields Plugin

WordPress Meta Box 1

Nowadays, this Advanced Custom Fields is the most popular plugin for creating custom fields. The visual builder allows you to add fields to WordPress edit screens conveniently. Furthermore, with the builder, you can add fields all over your WordPress website including posts, pages, user, media, comments, and taxonomies.

Features

  • Simple & Intuitive
  • Powerful Functions
  • Over 30 Field Types
  • Extensive Documentation
  • Millions of Users

Field Types

  • Basic (Text, Text Area, Number, Range, Email, Url, Password)
  • Content (Image, File, Wysiwyg Editor, oEmbed)
  • Choice (Select, Checkbox, Radio Button, Button Group, True / False)
  • Relational (Link, Post Object, Page Link, Relationship, Taxonomy, User)
  • jQuery (Google Map, Date Picker, Date Time Picker, Time Picker, Color Picker)
  • Layout (Message, Accordion, Tab, Group)

Creating a WordPress Meta Box

Now that you have some information about Advanced Custom Fields plugin, it’s time to create four fields for an author of a post, then add the fields to the end of the post edit screen.

Author fields

  • Author age
  • Author profession
  • Author hobby
  • Author wish

1. From the left sidebar of WordPress admin menu, click on Custom Fields > Add New.

WordPress Meta Box 2

2. Click on the Add Field button for creating fields.

WordPress Meta Box 3

3. Fill out the Field Label, Field Name, Field Type and other fields based on your needs.

WordPress Meta Box 4

4. Add three other fields similar to the above step then click on Publish/Update button.

WordPress Meta Box 5

For showing the created fields in the edit post screen, configure the Location settings as shown below.

WordPress Meta Box 6

6. Edit a post to see the fields.

WordPress Meta Box 6

7. For showing the value of these fields, read this article about displaying values in your theme.

Useful Resources:

Awesome ACF lists many extensions for this plugin. For this article, let’s mention some of them.

Admin Columns allows you to display ACF custom fields for posts (post meta) and users (user meta) as columns on your list overview.

Automatically generates the code you need to implement ACF fields in your themes.

Add a Font Awesome icon field type to Advanced Custom Fields.

Allows you to add a Date and Time Picker field type.

Create flexible and developer-friendly forms using the power of Advanced Custom Fields.

Create a WordPress Meta Box with Meta Box plugin

WordPress Meta Box Plugin

Another powerful and lightweight plugin for creating unlimited custom fields is Meta Box. with this plugin, we can add custom fields to post, page, forms, etc. Furthermore, this plugin has over 40 field types.

The free version of Meta Box Plugin doesn’t have an admin page in WordPress dashboard. For creating a meta box, you need to use an Online Generator tool. This tool generates necessary codes to register a meta box in your child theme.

Features

  • Supports 40+ custom field types
  • Powerful options for custom fields
  • Lightweight and well-coded
  • Developer friendly

Field Types

  • Input fields (Text, Number, URL, Email, Range, Text List)
  • Basic fields (Checkbox, Checkbox List, Button, Password, Radio, Select, Select Advanced Textarea, Hidden, Image Select)
  • Advanced Fields (Color Picker, OEmbed, Slider, WYSIWYG, Autocomplete, Fieldset Text, Map, Heading, Divider)
  • Date & Time Fields (Date, Date-Time, Time)
  • WordPress Fields (Post, Taxonomy, Taxonomy Advanced, User)
  • Media Fields (HTML File, File Input, File Advanced, Image Advanced, HTML Image, Video)

How to Create a WordPress meta box

Now, it’s time to create four fields for an author of a post in Meta Box plugin.

Author Fields

  • Autor Phone Number
  • Autor Email
  • Autor Birthday
  • Autor Site Address

1. Go to the Online Generator tool.

2. In the General tab, set the Function Name and Text Domain.

3. In the Meta Box tab, set the ID and Title of your meta box. Configure the other options to show the meta box at an appropriate place.

4. In the Fields tab, create the fields as explained below:

Field 1: Create Field with Number Type and set ID to author_phone_number and NAME to Author Phone Number.

Field 2: Create Field with Email Type and set ID to author_email and NAME to Author Email.

Field 3: Create Field with Date Type and set ID to author_birthday and NAME to Author Birthday.

Field 4: Create Field with Url Type and set ID to author_website and NAME to Author Website.

5. For generating codes, click on the Generate button. Click on the Copy link to copy codes to the clipboard.

6. Go to Function.php of your child theme then paste the codes and save it.
7. Edit a post to see the fields.

8. For showing the value of these fields, read this article about displaying fields.

Useful Resources:

The Meta Box website has a dedicated page for extensions. For this article, let’s mention some of them:

Create and manage custom post types and taxonomies quickly with an easy-to-use interface.

Pull all meta values from posts and terms into the WP REST API responses.

Create and manage custom taxonomies in WordPress with a user-friendly interface.

Add WordPress custom fields to comments in WordPress. It supports all field types and options.

Create WordPress Meta Box with Pods plugin

WordPress Meta Box Pods Plugin

Pods is a framework to manage all your custom content needs in ONE location. This plugin allows you to create and edit custom post types, taxonomy, fields, and even extend existing WordPress objects like users, media, posts, and pages.

Features:

  • Create a type of content in WordPress
  • Extend existing content types
  • Different field types and build your own with extensible field type classes
  • Importers to help your transition from other plugins

Field Types

  • Date / Time (Date, Time, both)
  • Number (Plain Number, Currency)
  • Text (Plain Text, Website, Phone, E-mail, Password)
  • Paragraph Text (Plain Paragraph, WYSIWYG, Code)
  • Color Picker
  • Yes / No
  • File / Image / Video
  • Avatars
  • Relationships

Create a WordPress Meta Box

Now, let’s add a meta box with some author fields in WordPress pages.

Author fields:

  • Author age
  • Author position

1. From the left sidebar of WordPress admin menu, click on Pods Admin > Add New.
2. In the new screen, choose Extend Existing.

3. Set content Type to Post Types (Posts, Pages, Etc) and Post Type to Pages then click on Next Step.

4. Add a Text field type and set the label to Author Age then set Name to author_age.

5. Add a Text field type and set the label to Author Position then set Name to author_position. Click on Save Pod button to save your fields.

6. Edit a post to see the fields.

Useful Extensions:

Pods plugin is a developer-friendly framework so some developers develop extensions to enhance the plugin. For this article, let’s mention some of them:

Easily select Pods fields in Beaver-Themer field connections from a dropdown based on the currently displayed item (CPT).

This extension provides the ability to sync entries from a Form Submission and Entry Edit screen.

This extension provides optimal performance with Pods sites on hosts with no object caching or low limits.

Conclusion

In this article, we introduced three plugins to help you to create, manage and extend WordPress Meta Box easily and quickly. The ACF plugin is the most popular plugin at the moment. Some popular themes like Jupiter X rely on ACF to manage the Meta Box and custom fields.

There are also some other plugins in the WordPress Community for managing Meta Box. Feel free to share your favorite one with us in the comment section!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Add Amazing Visual Effects to Your Content with Jupiter X

Add Amazing Visual Effects to Your Content with Jupiter X Featured Image

Visual effects such as parallax, sticky elements, unfolding contents, hotspots, web particle animation, and more. are helpful in almost every kind of website. E-commerce websites, for instance, can present their products better with hotspots on product images.

Landing pages can tell better and shorter stories – which translates to less bounce rate – with sticky elements or unfolding content. Parallax effect is also quite handy when creating eye-catching content. Normally, you would spend extra for different plugins. But with Jupiter X, they are all included for free in one plugin called JetTricks.

Add Amazing Visual Effects to Your Content with Jupiter X 1

Different Ways to Add Amazing Visual Effects to Your Content with Jupiter X

To make your content more useful and interesting to read, the rich library of visual effects available in JetTricks plugin is at your disposal. There are numerous cases where you can use these effects, but here are some of them:

1. Parallax effect is everywhere and it can be used to add a 3D depth to your content. Use it to create your static pages more dynamic and captivating! Parallax Effect Demo

2. Sticky elements are great in creating a custom scrolling experience. Make an important part of your content fixed while the rest scrolls down. Sticky Elements Demo

3. Unfolding columns and view more content effects are what you see in most introductory landing pages. Offering a long description does no good to your page bounce rate. By hiding a chunk of it and make a section optional to read, you can make your pages more effective. Unfolding column demo and View more content demo

4. Hotspot on images is a great addition to your online shop. You can also use it for more descriptive and interactive images across your website. Hotspot on Images Demo

5. Your pages don’t have to be boring. Add some smooth loop animations to your page backgrounds or banners to grab the attention of your site visitors and keep them interested. Loop Animations Demo

6. Use tooltips to create more informative yet less crowded pages. Perfect for eCommerce and product landing pages. Tooltips Demo

Easy Customisation

Working with visual effects in JetTricks is as easy as using Elementor editor! Every change you make is instantly available for preview and deeply customizable. There are also limitless possibilities and combinations you can try when you add amazing visual effects to your content with Jupiter X.

Add Amazing Visual Effects to Your Content with Jupiter X 2
You can use any JSON code to create particles with unlimited characteristics.

How it works

Jupiter X comes bundled with the JetTricks plugin for free. It’s deactivated by default, but you can activate it via the plugin manager in your Jupiter X control panel. When activated it, adds its settings to the existing Elementor elements such as columns, heading, an image, or completely new elements such as view more element and unfolding element.

So, what are you waiting for? You can now add amazing visual effects to your content with Jupiter X, so start vamping up your site today.

Documentation

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Meet Jet Engine! Your New Super Power To Create Custom Post Types With Jupiter X

One of the key factors when assessing a WordPress theme’s customizability is the number of post types it offers to its users. Post types enable you to build different types of content on your website. Literally, everything you build into your website should be hosted by a post type.

Posts, pages, and attachments are some WordPress native post types that are readily available upon WordPress installation. Based on the WordPress theme you use, you may have custom post types to create a wider range of content on your website. Some of the usual custom post types themes offer are portfolio, employees, testimonials, client, products, and sliders.

The Problem with Pre-built Custom Post Types

Custom post types are usually built into a theme’s core. It can increase the theme’s size and affect its speed and performance. You may have come across themes that offer custom post types you never use. You may have noticed that they just occupy some space in your WordPress dashboard navigation and reduce your websites admin’s speed. And this is one of the reasons the most customizable themes are the slowest ones, too!

So, is it possible to think about ultimate customizability with an infinite number of post types without affecting the theme’s speed and performance?

YES! Jupiter X, for the first time, turned many of the features that are commonly offered as post types to elements to save users a lot of time and effort. So, instead of creating posts in the WordPress dashboard, you can visually create elements such as employees, clients, and testimonials within Elementor and see the results in real-time.

Your WordPress dashboard sidebar is now free of post type items. You can activate the plugins like Raven and JetElements to access these elements only if you need them. If you don’t need them, you won’t have to import them and you can enjoy your theme at its highest performance.

Is that all?! Are we bound to elements and post types that Jupiter X offers?!

I’m happy to say ‘NO’ this time! 😀 Jupiter X recently added another member from the great Jet plugins family to the arsenal of plugins it offers to its users for free: JetEngine!

What is JetEngine?

JetEngine enables you to create new post types, taxonomies, and custom fields without any programming experience. You are no longer limited to post types built into your theme. You can simply build your own post type, add custom meta fields, customize its appearance and layout, and use them wherever you want.

Imagine: You don’t like the Team Member element in Jupiter X elements library to showcase your team member or you have a wide range of services with special meta fields and design needs. Or let’s say you want to build a website for a client with a wide range of products and you don’t want to add all of the content by yourself. You can simply create custom post types with Jupiter X and use them in your or your client’s website.

What’s more is that there is no coding involved and you will create the custom post types using Elementor page builder, for which you formerly needed to have good PHP skills!

What does JetEngine offer?

JetEngine offers special widgets for pulling dynamic content from the posts and displaying them in your custom post types.

Dynamic field

Display the meta content from a defined source and customize its appearance however you want.

Dynamic image

Display dynamic featured images in your custom post type and customize its appearance.

Dynamic repeater

Display dynamic repeaters in your custom post types using a defined source and enjoy infinite customizability.

Dynamic link

Add dynamic links to any custom post type.

Dynamic terms

The best way for showcasing dynamic taxonomies added to any posts or pages when creating a template with Elementor is using Dynamic Terms widget, that’s specifically cut for these purposes.

Dynamic meta

Display the publication date, information about the author, and/or the number of comments by adding Dynamic Meta widget to the template.

Listing grid

Use eye-catching Grid, Masonry and Justify layouts to display custom posts types and customize its appearance the way you want.

How to create custom post types with Jupiter X?

Let me quickly summarize how to create custom post types with Jupiter X. For a custom post type you need to create:

Post type

From the WordPress navigation bar, try:

JetEngine > Post Types > Add New

In the upcoming page, set the general settings about the custom post type first. For example, if you want to set this post type to public or private, change its appearance in WordPress navigation, or choose the sections you want to be available in the single page, and so on.

Then, you should define the meta fields you want in your custom post type. This can be a custom text, date, time, media, selector, or many other things.

A listing that uses that post type

Second, you need to create a listing in which your post type will be used. For that, try:

JetEngine > Listings > Add New

You can choose the post type you just created and then give its listing a name. Then, click on ‘Create Listing Item’

You will then be taken to the Elementor editor mode where you can create the layout of the listing for your post type however you want, just like your usual building experience with Elementor.

And that’s it! You just created a custom post type with the meta options you wanted and then created a listing where that custom post type can be used. You can now call your custom post inside your page using Listing Grid element:

You can define up to 6 columns for your listing grid within the Listing Grid element.

How to create custom post types with Jupiter X?

In this short post, we introduced the JetEngine plugin and showed you how to create custom post types with Jupiter X. If you want a more thorough explanation of the plugin, you can check the official documentation as well as the video tutorial below. Have fun and let me know if you have any questions regarding this new Jupiter X power ball!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Meet JetWooBuilder! The Ultimate Tool to Create Unique Product Page Templates With Jupiter X

JetWooBuilder is a great new feature in Jupiter X that allows you to create WooCommerce Single Product page templates and WooCommerce Product Archive templates with Elementor live page builder’s multiple dynamic content widgets.

You can create unique product page templates with Jupiter X using lots of special widgets and assign it to any product you need. JetWooBuilder is very simple to use. Anyone, from beginners to expert developers, can create attractive and professional-looking WooCommerce Single Product pages without ever touching a single line of code.

Like many other amazing features in Jupiter X, JetWooBuilder is a plugin that can easily be activated through Jupiter X plugin manager.

Customizability

With JetWooBuilder, you can create any layout and design using Elementor page builder and assign it to a product or create an archive template for Shop in your website. So, the options are limitless.

JetWooBuilder Overview – 

Check out samples here.

Powerful Global Widgets For WooCommerce Online Store

Some global widgets in JetWooBuilder can be used for showcasing products and their taxonomies on a custom page.

This widget displays the WooCommerce Product Categories in a Grid layout on the pages built with Elementor.

With this widget, you’ll display the products in a beautiful grid layout. Note that products should be created with featured images, descriptions, and prices in place, so you can set up the widget in the most fitting form.

Using this widget, you’ll showcase the WooCommerce products into stylish list layouts.

This widget allows you to display the taxonomy categories or tags for the WooCommerce products in the form of attractive tile layouts.

Creating a Single Product Page Template

With JetWooBuilder you can create a new or use a pre-designed single product template using dynamic WooCommerce widgets and set it for WooCommerce products.

The layouts that can be used are:

Left-side Product Image 1

Left-side Product Image 2

Right-side Product Image

Centered Product Image

The JetWooBuilder documentation will give you more information on how to create unique product page templates with Jupiter X.

Creating Product Archive Template

Another great feature is creating the Product Archive template to use for the Shop page or any other product layouts displaying related products, cross-sells or products in the shortcode.

Using special, easy-to-use WooCommerce widgets, you can build such archive layouts:

Products Grid with Left Sidebar

Products List with Left Sidebar 1

Products List with Left Sidebar 2

Products List with Right Sidebar

Find more details about creating archive templates in the JetWooBuilder documentation.

Other Features

There are numerous options you’ll discover once you start experimenting with this amazing Shop builder. Aside from that, you can create Categories Loop template, set advanced appearance settings of the widgets, define widget margins and padding, use entrance animation, change the background for the whole widget, and so much more.

When users search for a specific product, you can use the Archive template to show the relevant items they’re looking for. The Archive template will also allow you to display items using shortcode, or with Upsells or Cross-sells widgets in Elementor-built single product templates.

How to Create Unique Product Page Templates With Jupiter X

Watch this video to learn how you can easily create templates for your online store using Jupiter X and JetWooBuilder:

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to create professional magazine websites with Jupiter

Are you running a news website? Or perhaps you have a newspaper and magazine website? You should have known by now that there are numerous WordPress themes made just for that purpose. Sadly, only a few of them will actually meet your expectations.

Jupiter X is different. It promises a perfect set of news blog or magazine features while offering much more for you to push limits even further.

Jupiter X comes bundled with a powerful plugin called JetBlog. Like many other amazing features in Jupiter X, JetBlog is a plugin that can be activated easily through Jupiter X plugin manager.

It has everything you need to launch your professional blog or magazine website while enjoying the power of drag and drop and live editor at the same time.

Jupiter X offers these elements for your magazine website:

  1. Smart Posts List
  2. Smart Post Tiles
  3. Text Ticker
  4. Video Playlist

Now let’s go through them one by one:

Smart Posts List

The smart posts list is the perfect tool to create professional magazine websites with Jupiter. It can display your posts in the form of content blocks with varieties of layouts and fully customizable appearance. You can customize elements such as your featured post, image size, title, meta, and more.

Smart list is a great way to showcase the most recent or popular posts on your website. See some live examples here.

Smart Post Tiles

This nifty element allows you to showcase your posts in the form of eye-catching tile blocks with varieties of layouts and style. You can customize almost everything, such as the gap between boxes, box overlays, content appearance, and meta information.

It’s another awesome way of presenting your chosen posts in a single view.

There are also 6 pre-built layouts to make it easier to set up your lists. All of these layouts are extremely customizable and flexible, too.

See some live examples here

Text Ticker

Text ticker is another awesome addition to help you create professional magazine websites with Jupiter. This element displays the recent and most important post titles to engage your readers more effectively. You can use it with dark or light skins and customize every single bit of it using a live editor.

You can see some live examples here.

Video Playlist

Nothing can showcase your videos better than the video playlist element. You can now include a complete playlist in Vimeo or YouTube with an impeccable design embedded right within your pages, so users can enjoy the content without leaving your website.

The best thing about this element is that it’s highly customizable. You can arrange the playlist content and change the style of the thumbnails, scrollbar, thumbnail numbers, or typography. Almost anything is now possible with Jupiter X.

Check it out live here

All these powerful capabilities are now included in Jupiter X through the JetBlog plugin. You can activate the plugin anytime you need it, so it won’t make your website bloated and heavy.

How-to

Watch this video to learn how you can easily create magazine-style blogs for your website using Jupiter X and Jet Blog:

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Create a Mega Menu with Jupiter X

Create a Mega Menu with Jupiter X Featured image

Mega menus are famous for their capacity and multi-column structure to hold more content than a classic drop-down menu. They are also more customizable and diverse content. It means you can place not only hyperlinked texts but also images, videos, buttons, etc. Jupiter X comes bundled with the most powerful and flexible mega menu builder for WordPress and it’s called Jet Menu.

Like many other amazing features in Jupiter X, Jet Menu is a plugin and it can be activated easily through Jupiter X plugin manager. If you’re wondering how to create a mega menu with Jupiter X, then worry no more. We’ve come up with this guide to help visualize what you can do with this dynamic mega menu builder.

Customizability

With Jet Menu, you can basically create any layout and design using Elementor builder and assign it to a menu item in your website. So, the options are limitless.

Check out a sample menu here.

Create a Mega Menu with Jupiter X 1

Mobile menus

If you want menus that are fully responsive to mobile devices, then create a mega menu with Jupiter X. Moreover, there are tons of individual modifications and settings for smaller devices.

Create a Mega Menu with Jupiter X 2

Vertical Menu

Jupiter X does not stop there. You can create a beautiful vertical menu with it, too! This, of course, is completely responsive and just about as customizable as its horizontal counterpart.

Check out a sample menu here.

Other features

There are numerous options you’ll discover once you get your hands on this amazing menu builder. Aside from that, you can Export and Import menu options across sites. There are also menu presets you can save and re-use in different menu locations. 

How-to

Watch this video to learn how you can easily create a mega menu for your website using Jupiter X and Jet Menu:

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to create beautiful Pop-ups with Jupiter X

Pop-ups are essential for promoting products or services in websites, that most blogs and e-commerce sites take advantage of pop-ups to increase user engagement. A pop-up is a great way to make site visitors stay interested, making them explore the website with more curiosity and willingness.

There are numerous ways you can add pop-ups to your WordPress website but with Jupiter X, creating and adding a pop-up is quite easy. Like many other amazing features in Jupiter X, Jet Pop-up is a plugin and it can be activated easily through Jupiter X plugin manager.

How to use pop-ups effectively

Pop-ups, like everything else, can easily be misused and it becomes horribly annoying for website visitors. Knowing your audience and nature of business will help you to use pop-ups at the right time and place. Here are some ways you can benefit from pop-ups.

  1. Offer a coupon or discount
  2. Offer freebies
  3. Collect newsletter subscribers
  4. Offer a shipping discount
  5. Offer an ebook or online course
  6. Notify visitors about their abandoned cart
  7. Offer a time-based discount
  8. Offer a free quote or advice
  9. Cross-sell (relevant offer)
  10. Re-engage with more content
  11. GDPR
  12. Countdown
  13. Cookie Policy
  14. How pop-ups work in Jupiter X

Jupiter X comes bundled with a powerful premium plugin called Jet Pop-up. With Jet Pop-up, you can create pop-ups with Elementor page builder. It means every feature you enjoy from Elementor is available while creating pop-ups, too. Here are some of its great features:

Drag & Drop Experience

You build your pop-ups inside Elementor editor, meaning everything is done just as easy as drag and drop! Quickly edit the styles, parameters, and position of elements, and use just about any element you have in your Elementor.

Manage Trigger Events

Choose the events and set timers and dates when the pop-up has to appear on the page. Jet Pop-up supports all helpful events such as: On opening, User try to exit, Page progress scrolling, Attached to widget, Onset date and User inactive time.

Position the Pop-ups anywhere on the page

There are also numerous options to position your pop-up according to your needs:

Classic

Bar

Full View

Slide-in

Bordering

Custom

Animation effects

Loads of beautiful, pre-made templates

Jet Pop-up comes bundled with dozens of pre-made designs for those who are in a rush or looking for something to be inspired with. These templates are designed according to different purposes and styles. Check out these beautiful templates here.

What about GDPR?

As GDPR seems to be trending these days and it is becoming more and more important, you can now inform your site visitors of your cookie policies with Jet Pop-up. Unsurprisingly, you can choose from the number of GDPR and Cookie Policy info block presets, too.

How-to

Watch this video to learn how you can easily create Pop-ups for your website using Jupiter X and Jet Pop-up:

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Artbees’ Experience of WordCamp Milano: The Culture of Giving in WordPress

Before attending a WordCamp event in person, I always thought WordCamps were where WordPress developers and nerd coders hung out. Also, I was thinking WordCamp was where a genius came on stage to talk about technical matters related to WordPress and the audience clapped for them. This was the case until I attended the WordCamp Europe 2018 in person but the biggest change in my thinking about WordCamp was when I attended WordCamp Milano 2018.

Artbees was lucky to choose WordCamp Milano as the first WordCamp event to sponsor. Rouzbeh and I were representing Artbees at the event. We not only had the chance to showcase our Jupiter X to the Italian community of WordPress and also visit the beautiful city of Milan but also were able to manage to work hand in hand in one of the best WordCamp Contributors days we have ever attended. In this post, I will share with you the insights I’ve collected and how they changed my mind about voluntary work.

Does anyone contribute to WordPress?

Have you ever thought about how WordPress makes money? WordPress is a free platform. You can download, install and use its CMS from wordpress.org to build a website for free so how WordPress pays its bills. Well, you might s with wordpress.com subscriptions, the WordPress VIP service, its sponsors such as GoDaddy, BlueHost and SiteGround or with its plugins such as Jetpack, WooCommerce, Akismet and so on. Well that’s true, but it will surprise you to know that most of the work in WordPress behind and in front of the scene is being done by volunteers (so no bills to pay)!

As you know, WordPress is an open-source publishing platform and thousands of developers from different countries contribute to its codebase for free. All of them are working either for free or they are hired by companies that are built around WordPress. Oh, and by the way, they owe their existence to WordPress; Yoast -the leading SEO plugin for WordPress- is one of those companies that hire developers and puts them in service of WordPress core team to contribute to WordPress codebase.

In addition to the developers who contribute to the WordPress core, there are also volunteer teams called  ‘MakeWordPress Teams’. These teams are organized within different teams such as design, accessibility, mobile, support, documentation, themes, community, plugins and more; where we do lots of pro-bono works related to different parts of the WordPress software, WordPress community and everything in between!

You may have recently downloaded the hot new release of WordPress, Bebo. There is a high chance a particular feature in Gutenberg that you have liked or disliked was made by a contributor. Or for instance, if you have ever attended a WordCamp event, you should be aware that the entire team of organizers of that event are volunteers who work without getting paid. So, in fact, there are many people who contribute to WordPress, there are thousands of people who do it regularly and as part of their lives.

Is contribution to WordPress rewarding?

Yes. Actually, your voluntary work for WordPress can even be more rewarding than your full-time job. Below, I’ll have a look at our experience at WordCamp Milano contributor day and I’ll explain what ways you can get rewarded for the ‘free’ work for WordPress.

You will get a shiny badge on your WordPress.org profile

If you care about resumes, CVs and LinkedIn profiles (which you should!) you know how important it is to list certifications, degrees, achievements, awards, etc. related to your career and how effective they are to win the position you’re after. The good news is that the WordPress foundation will give you one of those shiny badges based on the kind of voluntary work you do for WordPress!

Marketing and Community MakeWordPress Teams Badges

It can be a core team contributor badge, marketing, design, accessibility, mobile or other teams badges that are issued by a prestigious software development company recognized by almost everyone in the software industry. I started my contributions to MakeWordPress Marketing team in WECU 2018, and I continued my contributions after the event as part of my regular life. And, at WordCamp Milano 2018 I was granted my Marketing Contributor badge!

There are hidden people and opportunities you want to discover!

The contributor days are not you sitting behind your laptop, writing code or anything else. It’s people who collaborate on getting things done for a software platform they like.  This is accompanied with a lot of fun, chit-chat, snacks and launch sessions. WordCamp Milano was a great example of this atmosphere. You could see people organized in different team working in maximum harmony. Among these teams, you happen to meet people you would never see outside a WordCamp; a fellow developer, a designer, a blogger, or a marketer.

With folks from Yithemes in WordCamp Milano 2018 Contributor day

At WordCamp Milano, we were lucky to catch up with folks from Yithemes– who run some of the most successful WooCommerce plugins in the market. We had a nice chat with Andrea and Giuseppe during the launch session about the state of affairs of the WordPress plugin and theme market, as well as discussing possible collaborations between Yithemes and Artbees. And you know what, that’s already in progress😉, and soon you will see that reflected in both of our products! This is the result of joining a session you know people in your area would join as well, knowing them, talking to them and expanding your networks. 

And that was not all. We happened to see some of the greatest members of the WordPress community there as well. Yes, someone you normally saw in photos next to Matt Mullenweg or wordpress.tv famous talks is sitting right next to you doing the very same job as you do. In the same place, on the same team. During the contributor session at WordCamp Milano, I got to meet Raffaella Isidori, an expert designer and passionate speaker on the marketing contribution team. She is an active part of the community team and a great leader to many on that team.

I was lucky to accidentally share the topic I was going to be speaking at WordCamp Thessaloniki a month later, ‘WordPress & Problem of Diversity’ with Raffaella and discovered she had a lot to share related to the topic. She referred me to a couple of people who have relevant experiences and stories regarding diversity. If nothing else, just the tips, ideas and people she openly shared with me made my talk a better and richer one. And to think I would have never known her outside WordCamp Milano 2018 Contributor day!

You will find your next job or missing team member

WordCamps are scenes for people from different areas and different levels of expertise and interests in their fields. There is a high possibility you can find the veteran Javascript developer you were looking for months through LinkedIn (useless!) job ads. There is also a chance you could meet someone who will employ you or connect you to your future job. Unlike many similar tech meetups or events like WebSummit, your ticket tier does not set your chances off from meeting pros and experts at the events.

WordCamps are powered by the bound of their community members to WordPress and its cause. It has a simple working economy, not to sell tickets on different tiers for the sake of more money (again like WebSummit). So chances are, that you can easily spot a legendary developer from Automattic, Yoast or WooCommerce (or Artbees! Just kidding ;)) during the contribution day, event day or after party! And, many entrepreneurs and business runners attend WordCamps to make use of this exact potential.

You learn. You learn a lot!

While working with agile development, design, marketing, community, training, and other teams on WordCamp Contribution days, you are likely to learn a lot of new things in your area. These teams are working under the supervision of leads. They are appointed based on their experience and cutting-edge skillset in their areas and can teach you what you could normally learn working in high-end tech and marketing companies or with very expensive training courses and events (i.e. Smashing Conference). Let me give an example from WordCamp Milano so you may relate better.

Marketing Team in WordCamp Milano 2018 Contributor day

Being a CMO and driving the marketing wings of my company, I have always had issues working with remote teams on Marketing. I’ve always had (and still have) doubts about how and if marketing teams can be remote? It wasn’t that it had completely changed my mind about the problem, but seeing how the MakeWordPress Marketing team is managing the remote work using a combination of Slack, Trello, protocols and weekly ceremonies started to make me think. And not to mention with dozens of contributors who have not met one another even once, was a bit of inspiration to maybe say that it is possible. At the least, I can understand that there is a still room to improve in my remote team.

How else can you support WordPress?

Simple. Support WordCamp events by sponsoring them! Look for local or continental WordCamp events in your area or where your target market lies. There are two continental WordCamps held every year: WordCamp Europe WCEU held in June in a European country, and WordCamp US WCUS held in the US in December every year. There are also dozens of local WordCamps in cities big and small on all continents. The sponsorship plans and prices can vary. You can find a sponsorship plan for as low as 500$ in a local WordCamp, but you can pay up to 100000 Euros for a top-tier sponsorship plan at a WordCamp Europe event.

Artbees was a Bronze sponsor of WordCamp Milano 2018

Artbees was a Bronze sponsor of WordCamp Milano 2018

In November 2018, we had the pleasure of supporting WordCamp Milano 2018 as Bronze-tier sponsor. We had the chance to meet and network with local WordPress businesses, meet with some of the great organizers of WordCamp in Italy and also had the opportunity to feature our brand new Jupiter X WordPress theme to WordPress lovers. This was our first WordCamp event to sponsor, but that led to a chain of interest to sponsor other WordCamps including  WordCamp Thessaloniki in Dec 2018, and WordCamp Europe in June 2019. And then who knows, maybe many others🙂. Start by checking make.wordpress.org to find the team you like to start contributing or visit WordCamp Central to find the next WordCamp event nearby to sponsor!

Hero image > Courtesy of Massimo Mormile – WordCamp Milano 2018

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

[Giveaway] A Taste of 2019 with Artbees Free Holiday Template!

I want to add to the happiness right in the middle of the happiness this season brings! You’re most likely having fun celebrating the Christmas season and preparing for the new year or enjoying your vacations right now. Regardless, I’d like to take the opportunity and treat you with a free template from Artbees to add to the happiness that this season brings!

Continue reading

How To Create A Great Case Study For A Creative Project

There are two ways to showcase your creative work to your future clients: showing them and showing them the right way. Some believe that showcasing a portfolio project in itself is a creative work and even more important than creating the project itself. I, personally, have seen great presentations of mediocre portfolios converting more users into leads than a great creative portfolio which was presented poorly. Simply put, using effective presentation techniques will boost the value of a project.

Continue reading

A Virtual Summit Expert Talks About How To Run Event Websites With WordPress

run event websites with wordpress

Online events are nothing new to us, and they come in many different forms. We are constantly bombarded by product and service websites featuring online “how to” webinars which detail the key points and advantages of the product. Or there are the online training courses that happen in the form of one-time online sessions. Additionally, one may find that many tech conferences are held up virtually as online events or that independent brands will deliver their service in the form of online events for which people can register and attend.

Continue reading

WordPress Is About to Be Reborn. Find Out How the Future of WordPress Is a Game Changer

hero-future of wordpress

We have already entered an age of services in which capitalism is turning services into commodities not products. The tech industry and digital market are also no exception. The software and internet industry have already begun to change their economics to services based businesses. Take free OS upgrades and apps just as an example. But how is it going to affect WordPress as a popular website building solution?

Continue reading