Mods Archives • CSSIgniter https://www.cssigniter.com/kb-category/mods/ Premium WordPress themes, templates & plugins Tue, 04 Jul 2023 12:46:25 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 https://www.cssigniter.com/wp-content/uploads/2020/09/cropped-cssigniter_logo_transparent_v2-32x32.png Mods Archives • CSSIgniter https://www.cssigniter.com/kb-category/mods/ 32 32 How to change a custom post type’s slug https://www.cssigniter.com/kb/how-to-change-a-custom-post-types-slug/ Mon, 14 Jun 2021 13:51:59 +0000 https://www.cssigniter.com/?post_type=knowledge-base&p=21907 In this small guide we’re going to take a look at a couple of ways to change the slug of any Ignition Framework custom post type. In this example we will be changing the slug of the Accommodation post type from accommodation to room, this means that the URLs will go from this: to Say […]

The post How to change a custom post type’s slug appeared first on CSSIgniter.

]]>
In this small guide we’re going to take a look at a couple of ways to change the slug of any Ignition Framework custom post type.

In this example we will be changing the slug of the Accommodation post type from accommodation to room, this means that the URLs will go from this:

https://yourdomain.com/accommodation/sea-view-suite/

to

https://yourdomain.com/room/sea-view-suite/

Say What

The first way is ideal for single language sites. First you will need to install and activate the Say What plugin. Once the plugin is installed and activated navigate to the Tools > Text Changes and click the Add New button.

Now we need to fill in the required strings.

The original string is the default slug of the post type we want to change. The default slugs of the Ignition Framework custom post types are listed below.

  • Accommodation post type: accommodation
  • Discography post type: discography
  • Event post type: event
  • Podcast post type: podcast
  • Portfolio post type: portfolio
  • Service post type: service
  • Team member post type: team

The text domain is the Ignition Framework’s text domain which is always ignition.

The text context is the context for the string we want to change and for this case it will always be post type slug.

Finally the replacement text is the new slug we want for our post type.

As an example we will be changing the accommodation slug on the Aegean Resort theme to room.

After filling in the required information we press the Add button. Next we navigate to Settings > Permalinks in order for the permalink cache to be flushed and we’re good to go.

Loco Translate

Another plugin that can help us here is Loco Translate which is a string translation plugin and is better suited if we have multilingual sites. Install and activate the plugin and navigate to Loco Translate > Plugins > Ignition Framework.

Click the New language link to proceed.

Select the language for which you want the modification to be made from the drop down (1), set the custom location for the file to be saved in (2) and then click the Start translating button (3).

In the search box (1) search for accommodation, from the results pick the one with the post type slug label (2) and type in its replacement in the translation box (3), finally click the Save button (4). Now all you need to do is navigate to Settings > Permalinks to flush the permalink cache and you are good to go, the post type slug has been changed from accommodation to room.

The post How to change a custom post type’s slug appeared first on CSSIgniter.

]]>
Use custom titles for your menu items https://www.cssigniter.com/kb/use-custom-titles-for-your-menu-items/ Sun, 10 Jan 2016 09:56:46 +0000 http://www.cssigniter.com/docs/?post_type=cpt_article&p=995 WordPress automatically assigns titles to menu items, based on the title of the item added. For example, if we add a link to a page called “Booking” on our menu, the menu item will be titled “Booking”. Sometimes you might want a different title than the default one applied by WordPress. Let’s see how we […]

The post Use custom titles for your menu items appeared first on CSSIgniter.

]]>
WordPress automatically assigns titles to menu items, based on the title of the item added. For example, if we add a link to a page called “Booking” on our menu, the menu item will be titled “Booking”.

Sometimes you might want a different title than the default one applied by WordPress. Let’s see how we can modify it.

Go to Appearance > Menus and open the menu item in question. Modify the Navigation Label to match your needs and click the Save Menu button. That’s it.

nav_label

The post Use custom titles for your menu items appeared first on CSSIgniter.

]]>
Add a custom class to a menu item https://www.cssigniter.com/kb/add-a-custom-class-to-a-menu-item/ Sun, 15 Nov 2015 20:35:01 +0000 http://www.cssigniter.com/docs/?post_type=cpt_article&p=937 Sometimes you might need to highlight one of your menu items, give it a special look to attract attention. This can easily be done by adding a custom CSS class to it and applying the proper styles to it. To add a custom class, go to Appearance > Menus and activate CSS Classes using Screen Options. Next go to your […]

The post Add a custom class to a menu item appeared first on CSSIgniter.

]]>
Sometimes you might need to highlight one of your menu items, give it a special look to attract attention. This can easily be done by adding a custom CSS class to it and applying the proper styles to it.

To add a custom class, go to Appearance > Menus and activate CSS Classes using Screen Options.

Next go to your menu item and add a custom class in the new metabox that appeared.

menu_class

Save the menu and you are done.

Now you can use this class either in a custom CSS box (if applicable) or in the theme’s style.css file to apply a unique style to the menu item.

For example, using these styles

.menu-button a {
border: 2px solid #000;
padding: 10px;
text-align: center;
}

will modify the menu item’s appearance to resemble a button, as displayed below.

custom_menu_style

The post Add a custom class to a menu item appeared first on CSSIgniter.

]]>
Create an empty link on the menu https://www.cssigniter.com/kb/create-an-empty-link-on-the-menu/ Tue, 29 Sep 2015 12:04:12 +0000 http://www.cssigniter.com/docs/?post_type=cpt_article&p=896 Sometimes you might need to have a top menu item that just won’t link to anything, to serve as a group title for the sub-menu items below it. WordPress won’t allow you to create an empty custom link though. To bypass this limitation we can create a custom link that points to the # symbol. […]

The post Create an empty link on the menu appeared first on CSSIgniter.

]]>
Sometimes you might need to have a top menu item that just won’t link to anything, to serve as a group title for the sub-menu items below it.

WordPress won’t allow you to create an empty custom link though. To bypass this limitation we can create a custom link that points to the # symbol.

To do that navigate to Appearance > Menus, create the custom link as displayed below

empty_link

then add it to your menu.

Once added you can edit your custom link and delete the # from the URL box

empty_added

you will end up with something like this

empty_cleared

save your menu and you are done, you now have an unclickable menu item.

The post Create an empty link on the menu appeared first on CSSIgniter.

]]>
How to make menu link open in new page https://www.cssigniter.com/kb/how-to-make-menu-link-open-in-new-page/ Tue, 26 May 2015 20:06:31 +0000 http://www.cssigniter.com/docs/?post_type=cpt_article&p=781 Let’s say you have created a custom link on your menu and you want it to open on a new tab when the visitor clicks it. To do that, go to Appearance > Menus, click Screen Options and enable Link Target. next visit your menu item, click the small arrow to its right to expand it and then […]

The post How to make menu link open in new page appeared first on CSSIgniter.

]]>
Let’s say you have created a custom link on your menu and you want it to open on a new tab when the visitor clicks it. To do that, go to Appearance > Menus, click Screen Options and enable Link Target.

link_target

next visit your menu item, click the small arrow to its right to expand it and then check the Open link in a new window/tab box, finally, save your menu.

 

The post How to make menu link open in new page appeared first on CSSIgniter.

]]>
Create a custom link on your menu https://www.cssigniter.com/kb/create-a-custom-link-on-your-menu/ Tue, 26 May 2015 19:59:48 +0000 http://www.cssigniter.com/docs/?post_type=cpt_article&p=779 Sometimes you might need to add a link to your site’s main menu that is not part of your pages or posts, a link to another site, a service etc. To do that you need to go to Appearance > Menus and use the Custom Links tab. Fill in the URL and the menu item’s title and click the Add […]

The post Create a custom link on your menu appeared first on CSSIgniter.

]]>
Sometimes you might need to add a link to your site’s main menu that is not part of your pages or posts, a link to another site, a service etc. To do that you need to go to Appearance > Menus and use the Custom Links tab.

custom_link

Fill in the URL and the menu item’s title and click the Add to Menu button, your custom link has been added to your menu. Make sure to click the Save Menu button for your changes to be applied.

TIP: You can use custom links to create an unclickable link to use as a top menu item, for example if you have a hotel, have separated your rooms in categories and you wish to display each category separately, rather than all of them in a listing page. You can create one such top menu item called Rooms and below it add links to your room categories as sub menu items.

To create that link, follow the same procedure as before, but add the pound/hash sign in the URL box, like this

unclickable

The post Create a custom link on your menu appeared first on CSSIgniter.

]]>
Creating a child theme https://www.cssigniter.com/kb/creating-a-child-theme/ Mon, 25 May 2015 20:26:57 +0000 http://www.cssigniter.com/docs/?post_type=cpt_article&p=772 People love to customize their themes, we daily get dozens of requests for help with all sorts of creative changes our users want to apply on their freshly bought themes. However, when the time comes to update the modified theme to a newer version, things get tricky due to the risk of either losing your […]

The post Creating a child theme appeared first on CSSIgniter.

]]>
People love to customize their themes, we daily get dozens of requests for help with all sorts of creative changes our users want to apply on their freshly bought themes. However, when the time comes to update the modified theme to a newer version, things get tricky due to the risk of either losing your changes or having to reapply them one by one. Users rarely create child themes, when asked if they have done so, they reply either that they do not know what a child theme is or that they thought it was difficult to create one an skipped it. Hopefully, this guide will correct both issues.

What is a child theme

According to the WordPress Codex:

A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

Essentially a child theme is a supplementary theme, it is not a standalone theme, it requires the presence of its parent in order to work. It inherits all functionality found on the parent theme and allows the user to easily extend it.

Why use a child theme

The major advantage is that it makes updating very easy and very fast. Let’s say that you pick a theme you like and you come up with a couple of changes you’d like to see made on each listing template and a few more for your widgets, once done, you realize that there is a new version of your theme available, your options now are, either to keep using an outdated version, which of course we all know is not optimal, or install the new version and reapply all changes one by one, because any change made in a theme’s file, won’t transfer through updates. If you use a child theme, on the other hand, all the edited files are in the child theme’s folder, so updating the parent won’t affect them at all.

Another advantage is that a child theme gives you the ability to experiment with your changes without worrying what happens if you break something, if you do, you can easily switch to the parent theme and your site will work just fine, you now have all the time you need to find out what went wrong and revert it, without causing significant downtime.

How to create a child theme

We offer child themes for all of our themes, just navigate to the downloads section and grab the ready made child theme for yours.

Creating a child theme is very easy, all you need to create is a folder and a file.

Use Filezilla, or any other FTP client, to log into your server and navigate to the /wp-content/themes/ folder of your WordPress installation. You will see a few folders, each one represents a theme. In our example we have only Aegean v1.9 installed.

guide-1-parent

proceed by creating a new folder called ‘aegean-child’ as demonstrated below

guide-2-child

next, enter the ‘aegean-child’ folder and inside create a file called ‘style.css’

guide-3-child-style

now edit the style.css file with your favorite text editor ( for example, you can use Notepad++ for Windows, Textedit for Mac and Leafpad for linux) and paste these in

/*
Theme Name: Aegean Resort Child theme
Theme URI: http://yoursite.com/aegean-child
Description: A child theme for Aegean Resort
Author: Me
Author URI: http://yoursite.com
Template: wp_aegean5-v1.9
Version: 1
*/

@import url("../wp_aegean5-v1.9/style.css");
/* Place your custom styles below this line
-------------------------------------------------------------- */

this will give your child theme a name and connect its stylesheet with the one of the parent theme.

TIP: notice that the template name and the @import URL match exactly the folder name of the parent theme, this piece of information will be very useful when we need to update the theme.

That’s it. Your child theme is done, you can go to Appearance → themes in your WordPress dashboard and activate the ‘Aegean Resort Child Theme’.

You are ready to start customizing your theme. You can paste any styles below the indicated line in the style.css file, or in our custom CSS box in the CSSIgniter Settings panel.

If you have built a function you want to incorporate to your child theme all you need to do is create a file called ‘functions.php’ with this content:


<?php

//Your new functions below this line

and paste it in where indicated, no need to mess with the parent’s functions file.  The same goes if you want to modify an existing template, you copy the template file from the parent theme to the child and edit away. Finally, you can also create new templates, for example, you need to create a custom template for the ‘villas’ room category, in your child theme’s folder, create a file called taxonomy-room_category-villas.php edit it and build your template any way you wish to.

There is an update for my parent theme, what do I do now?

First, you download and install the updated version, as usual, in our example, this will be Aegean v2.0

Use Filezilla again to log into the /wp-content/themes/ folder of your installation, you will see something similar to this

guide-4-update

enter your child theme’s folder, in this case, ‘aegean-child’ and edit the style.css file. You will need to modify the ‘Template:’ name and the ‘@import’ url to match the folder name of the updated version, the end result should look like this

/*
Theme Name: Aegean Resort Child theme
Theme URI: http://yoursite.com/aegean-child
Description: A child theme for Aegean Resort
Author: Me
Author URI: http://yoursite.com
Template: wp_aegean5-v2.0
Version: 1
*/

@import url("../wp_aegean5-v2.0/style.css");
/* Place your custom styles below this line
-------------------------------------------------------------- */

Done! You have successfully updated your theme to its latest version without having to worry what will happen with all those changes you made to the template files.

Conclusion

As demonstrated above, creating a child theme requires at most five minutes to create and apart from its major advantage, making the updating procedure of a modified theme a breeze will also help you to understand more about WordPress theme development by allowing you to experiment with template options, without the fear of breaking anything. After reading this article, there is no excuse for not creating a child theme if you want to customize your theme, go create one and start creating!

The post Creating a child theme appeared first on CSSIgniter.

]]>
Screen Options https://www.cssigniter.com/kb/screen-options/ Mon, 25 May 2015 14:24:56 +0000 http://www.cssigniter.com/docs/?post_type=cpt_article&p=747 Some aspects of the work area on your dashboard are by default hidden to prevent cluttering and avoid confusing the novice user. These include the author metabox on posts, the slug metabox on pages and many more. To modify what appears when editing a post, a page, a custom post type or the menu page […]

The post Screen Options appeared first on CSSIgniter.

]]>
Some aspects of the work area on your dashboard are by default hidden to prevent cluttering and avoid confusing the novice user. These include the author metabox on posts, the slug metabox on pages and many more.

To modify what appears when editing a post, a page, a custom post type or the menu page you can use Screen Options. Screen options appear as a hanging tab at the top right hand side of your dashboard window

screen_options_tab

clicking the tab will display the available options

screen_options_open

In general you won’t be using screen options very much, but they do come in handy in certain cases. Let’s take our very popular Santorini Resort theme, the theme features listing pages which display your accommodations, however this listing page displays all accommodations, what happens if you just want to display one accommodation category? That’s where screen options come in, you navigate to Appearance > Menus and click screen options, you’ll notice that there is a checkbox with the label Accommodation Categories

check it and you will get a new list of menu items which you can add to your menu and create pages that will only display a particular accommodation category.

Screen options and the block editor

If you are using the WordPress block editor you can find most of the screen options under Options > Preferences > Panels.

First access the preferences and navigate to the panels tab.

Some options might still not be visible, if you are looking for one of those you will have to revert to the classic editor using the required plugin.

 

The post Screen Options appeared first on CSSIgniter.

]]>
How to add Google Analytics to your site https://www.cssigniter.com/kb/how-to-add-google-analytics-to-your-site/ Fri, 22 May 2015 08:51:35 +0000 http://www.cssigniter.com/docs/?post_type=cpt_article&p=725 Google Analytics is a very good and popular tool which allows you to collect basic visitor data from your site. If you are not familiar with it you can read the getting started page. The installation procedure is very easy, thanks to Site Kit plugin, the official WordPress plugin provided by Google. Let’s take a look. […]

The post How to add Google Analytics to your site appeared first on CSSIgniter.

]]>
Google Analytics is a very good and popular tool which allows you to collect basic visitor data from your site.

If you are not familiar with it you can read the getting started page.

The installation procedure is very easy, thanks to Site Kit plugin, the official WordPress plugin provided by Google.

Let’s take a look.

Go to Plugins > Add New (1) and search for Site Kit (2). Find the Site Kit plugin in the results and click on Install Now (3). Once the installation is complete, click on Activate.

With the plugin activated, go to Site Kit > Dashboard (1), check the Connect Google Analytics as part of your setup (2) and  click on Sign in with Google (3).

In the next step you have to login to your Google account (or choose one of the already logged in accounts).

Check the Select all and press Continue.

Click on Verify.

Next, click on Allow.

Click on Set up.

and finally, click on Next.

Now it’s time to connect Google Analytics Service to our website. Make sure that Account, Property and Web Data Stream point to your websites URL and click on Create Account.

Login to your Google Account (or choose one that is already logged in).

Check the Select all and press Continue.

Read and agree to Google Analytics Terms of Service and click on I Accept.

Finally, your Google Analytics account has been created. Click on Go to my Dashboard.

That’s it! Congratulations. Everything’s set up!

For additional information, you can visit the Site Kit Documentation page.

 

 

The post How to add Google Analytics to your site appeared first on CSSIgniter.

]]>
How to find the page ID or post ID https://www.cssigniter.com/kb/how-to-find-the-post-id/ Fri, 22 May 2015 08:24:06 +0000 http://www.cssigniter.com/docs/?post_type=cpt_article&p=722 Manually via WordPress Each post, page or custom post type in WordPress carries a unique numeric ID, this ID might be used in all sorts of ways so let’s see how we can find it when we need it. Go to your dashboard and open the post/page in question for editing, look at your browser’s […]

The post How to find the page ID or post ID appeared first on CSSIgniter.

]]>
Manually via WordPress

Each post, page or custom post type in WordPress carries a unique numeric ID, this ID might be used in all sorts of ways so let’s see how we can find it when we need it.
Go to your dashboard and open the post/page in question for editing, look at your browser’s address bar, you will see the ID in the post’s URL

locate-id

A quicker method would be by hovering over your Post Item (1) and getting the ID from the info box that appears on the bottom left of your browser window (2)

Display Post/Page/Custom Post type IDs with a Plugin

The easy solution comes with the use a of plugin.

Reveal IDs, a great free plugin that shows the IDs of posts, pages, categories, custom taxonomies, custom post types, etc!

After installing the plugin you can see the ID column in your post/page and all your listings in general.

 

 

The post How to find the page ID or post ID appeared first on CSSIgniter.

]]>